:target Selector

A fragment identifier can be added to a URL to navigate directly to an element based its id attribute. For example, example.html#myelement goes to the element whose id is 'myelement' in example.html.

:target selector matches the element that the URL fragment identifier refers to.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        :target { 
            border: thin black solid; 
            padding: 4px; 
            color:red; 
        } 
        </style> 
    </head> 
    <body> 
        <a href="http://java2s.com">Visit the java2s.com</a> 
        <p id="mytarget">HTML and CSS</p> 
    </body> 
</html>
  
Click to view the demo

If you save the above document as example.htm. You can see the result of target selector by referencing example.htm with example.htm#mytarget.

Home 
  HTML CSS Book 
    CSS  

Pseudo Selectors:
  1. ::first-line Selector
  2. ::first-letter Selector
  3. :before Selector
  4. :after Selector
  5. CSS Counter Feature
  6. :root Selector
  7. Child Selectors
  8. :first-child Selector
  9. :last-child Selector
  10. :only-child Selector
  11. :only-of-type selector
  12. :nth-child(n)
  13. :nth-last-child(n)
  14. :nth-of-type(n)
  15. :nth-last-of-type(n)
  16. Enabled Elements with :enabled
  17. Disabled Elements with :disabled
  18. Checked Elements with :check
  19. Default Elements with :default
  20. Valid Elements with :valid
  21. Invalid input Elements with :invalid
  22. :in-range selector
  23. :out-of-range selector
  24. :required selector
  25. :optional selector
  26. :link selector matches hyperlinks.
  27. :visited selector matches visited hyperlinks.
  28. :hover Selector
  29. :active Selector
  30. :focus Selector
  31. Negation Selector not
  32. :empty Selector
  33. :lang Selector
  34. :target Selector
Related: