This page is Not Ready

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

:target pseudo-class selector


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. 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 }


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 */

View live example


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