Thursday, December 12, 2013

The CSS3 :target pseudo-class

Some years ago, in 2005, I attended a workshop about CSS. Andy clark told us about the near future and showed us an example of a completely CSS driven web page. We all thought that there was some kind of javascript there but Andy said that the secret was the CSS3 :target pseudo-class.

You can run this jsFiddle for a live example.

The idea behind the :target pseudoclass is that the target element of an anchor can have its CSS rules. For example the anchor link "#info" is targetting the paragraph with id "info". When we click this link, the CSS selector p#info:target is triggered and all its rules are applied.


Click on the link to show the hidden paragraph: show me.

This is the hidden paragraph.


/* here's pseudoclass-target in action */

p#info {

p#info:target {
    border:2px solid red;

No comments: