Target(ing) on CSS3

Jun 24, 2007 · 2 minute read

Apologies up front for the bad pun but I’ve been busy playing with another little feature found in CSS3, namely the :target pseudo-class.

It’s actually pretty well described in the CSS3 Selectors module, (although given that the specs make lots of use of partial URLs the spec style sheet is crying out for use of said selector to I digress).

Put simply it allows you to style elements of a page that are the target of in page anchors, ie. <a href=”#target”>in page link</a>

For example. The following CSS hides all div children of an element with an id of example3.

<code>#example3 >div {
    display: none;
}</code>

The we can say “if said element has been targetted then display them all”

<code>#example3:target >div {
    display: block;
}</code>

So if you visiting #example3 you would see the divs, otherwise they will be hidden away.

I’ve set up a couple of examples over on morethanseven.net/presents/target.

These examples basically remove the need for Javascript implementations but I’m not sure whether I’d actually use either of these. But you get the general idea. One thing about the examples was their simplicity compared with similar approaches though.

It’s already pretty well implemented according to this handy compatability table from CSS3.info and I would imagine an ideal candidate for Andy Budd’s CSS2.2.