Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > target Pseudo-class
Sets the style of target elements in a document.
selector:target { property: value; }
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :target pseudo-class applies styles to a named location within the same HTML document.
In many cases, the target of a link may be set to a destination element within the same document.
To enable an element as a destination, the element must be given an anchor name using the element’s id attribute.
<h2 id="section2">How Links Work</h2>
... contents of section 2 here below ...
This creates a destination anchor for the heading element that can be the target of any other link, such as an entry in a file’s table of contents.
The following shows how a link may be used to access the named section within the same page.
<a href="#section2">Section 2: How Links Work</a>
The pound sign (#) refers to a fragment identifier that points to a named location on the file. Web Authoring Basics has more information on fragment identifiers.
The :target pseudo-class allows styling a link’s destination or target element, in this case, the <h2> heading.
The syntax for using the :target pseudo-class is straightforward. Nothing precedes the pseudo-class.
For example, to change the color of a destination anchor on a page:
:target { color: #005 }
Please see Linking to a location within a document for further information.
The following demonstrates use of the :target pseudo-class in an embedded stylesheet to set the color of a destination element on the same page.
Show me
:active :focus :hover :link :visited