By accident the other day I came across the CSS3 target selector. If you’re unfamiliar with what pseudo class selectors are, the W3C defines them thusly:
“The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.”
There are several pseudo classes widely in use today, for example the :visited selector which is normally used like:
a.external:visited
to specify styling of links that have already been visited by the user.
The target pseudo class selector allows us to style parts of the web page that are targeted by bookmark anchor links. Again, I’ll use the W3C for an example:
“Some URIs refer to a location within a resource. This kind of URI ends with a “number sign” (#) followed by an anchor identifier (called the fragment identifier). URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in an HTML document: http://example.com/html/top.html#section_2. 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.”
You’re seen these links since the web began, however now we can apply styling based on the specific bookmark anchor. For example, using the URL in the previous paragraph, we could create a style that was only applied to the bookmark anchor section_2 if the URL contained #section_2. An example helps illustrate what I mean. Take a look at this page, but don’t click anything. Feel free to scroll up and down. Nothing special right? Now try clicking one of the links in the page, or go to the page again using this link /downloads/pseudo-target.html#two. Pretty cool. No JavaScript or anything else needed. What happens is that the bookmark anchor you follow gets styling applied to it only when the URL contains the bookmark anchor (e.g. #two, #six, #seven, etc.). The CSS that accomplishes this is:
dt:target {
color:blue;
background:#EFEFEF;
border:1px solid #CCCCCC;
padding:4px 2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
dt:target + dd {
padding:4px;
color:#336;
background: #FDFDFD;
border-bottom: 1px dotted #CCCCCC;
border-right: 1px dotted #CCCCCC;
border-left: 1px dotted #CCCCCC;
}
By applying the :target pseudo class selector, we can tell the browser to only style the elements on the page that match the bookmark anchor chosen. Among other things, this allows you to easily style part of a page like a FAQ and highlight the relevant link only when the user has clicked on a bookmark anchor or followed a URL that targets a specific anchor. How many times have you followed a link that jumps you to a specific part of a long document only to not be sure that you’re seeing what you expected. This is especially true when bookmark anchor links take you to the bottom of a page when the browser can’t pull the content up to the very top of the window (i.e. link one versus link 10 in the demo).
Browser support
Since the :target pseudo class selector is a CSS3 feature, not all browsers understand it, or implement it fully. Firefox 3.5.1 and Chrome 2.x do a great job. Safari 4 almost gets it all right, and IE8 ignores it completely. Opera 9.64 seems to handle the :target selector alright, but ignores the sibling CSS (dt:target + dd).
