HTML5 and CSS3 Advent 2011

:target those elements

Fragment identifiers in URLs (the part after the hash: index.html#position) are by no means a new feature, but their usefulness has a long time been limited to linking to a specific position within a longer document. With the adaptation of javascript, ajax and other fancy new technologies they got a lot more traction, but still, you need javascript to do something really useful.

But no more! The :target pseudoselector allows us to style our content based on the fragment identifier in the URL.

Examples

Watch the URL in your browser change.

This is a scientific article with some footnotes

Click the footnote references to see references to good books. One of them is a good book on HTML51, another one covers cool CSS3 stuff2. I've waited quite a while for David Kadavy's book3, I just haven't got around to ordering it.

When you have a lot of footnotes, highlighting them with :target make hem very easy to find.
This simple slideshow is another example.

How does it work?

The :target pseudoselector will match on any element that has an ID that matches the current fragment identifier in the url. This sounds very complicated, but is in fact very simple. An URL like this: index.html#note1 will match the css rule #note1:target { }.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012