:target pseudo-class selector
Summary
The :target pseudo-class (note the “:”) represents an element in the current document, if any, that has id attribute set to a name that is matching the fragment identifier of the current URI.
An URI fragment is what follows the “number sign” (#).
URIs with fragment identifier can be used to link to a specific part of a document, known as the target element. This also how we can navigate directly to a section of a page long without scrolling manually.
Scrolling automatically to a fragment is not the only benefit; It is also possible to target and style those elements through CSS.
Let us say you have a section in a document called "foo" (e.g. <div id="foo">...</div>), and you want to style it differently when it gets linked. When somebody navigates to that page with the appropriate URI fragment in the address bar (e.g. http://example.com/some/page.html#foo) we then can adjust the style to suit our requirements.
Any element can be a target, as long as it has the id=".." attribute set, and the current URI matches it. To use the selector, we use the :target pseudo-class notation. If the document’s URI has no fragment identifier, then the document has no target element.
Using the selector
To use the selector, append the pseudo selector (:target) after a selector string.
.note:target { /* ... */ }
In this example, the selector targets an element that has a class name selector note and will be used when its matching elements also has an id attribute matching the current URI.
Since it is a pseudo selector, it has to be at the end of the chain (e.g. tagName#idName.className:pseudo-selector).
For example, to change the background color of ANY tag that happens to be refered in the URI, you can do like the following:
*:target { background-color: red }
Examples
Changing background color of an element that has an id attribute with a name that matches the current URI after the pound (#)
*:target {
background-color: #f06;
/* any element that has an id attribute matching
in the URI will have the background color
affected to pink */
}
Notes
The id attribute was new in HTML 4 (December 1997). Before that, we were using the name attribute in an ahcnor tag (e.g. <a name="foo">. The :target pseudo-class applies to those targets as well.
See also
Related articles
Pseudo-Classes
:target pseudo-class selector