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 http://jsfiddle.net/jurquizu/Wtr4g/ 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.

HTML

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

CSS

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

p#info {
    display:none;
}

p#info:target {
    display:block;
    border:2px solid red;
    background-color:yellow;
    width:250px;
    text-align:center;
}