Pseudo-class :target, useful CSS3 selector on the stairs

The CSS3 pseudo-class :target is a useful method for identifying the target element within a document.

9/9/2006

2
  • Currently 3.5/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

CSS3, Selectors level 3 is in the last face as a work document. This means that the recommondation of these specifications is just around the corner, and that only small  or none changes can be expected for the final result. In this example we take a look at the pseudo-class :target.

URIs with fragment identifiers link to a certain element within the document, known as the target element. A target element can be represented by the :target pseudo-class. If the document’s URI has no fragment identifier, then the document has no target element.

With other words, the pseudo-class :target can highlight active elements in internal links on your page. Example:

  1. <p><a href="#someThing">Read more about something</a></p>
  2. <h4 id="someThing">Something heading</h4>

If I for example wan't to highlight this heading with another color this can easily be done with the CSS3 :target pseudo-class:

  1. h4:target {
  2. color: #FF00FF;
  3. }

If the value #someThing is found in the adress the H4 heading will change color in this example. You can of course assign this to other elements than headings, but on Strictly CSS this is implemented on the H4 headings on the Check Server Header tool page, and on the faq page, and it therefor was naturally to use H4 in this article also.

Note that for the moment this demonstration will only work in the Firefox and Safari browsers.

This article is freely inspired and translated from the Norwegian blog bza.no.

Internet tools