SELECTORS - CSS: Professional Techniques for Modern Layout - page 41

(And technically the universal selector is optional in that case; you can write simply :target
for the selector.)

If you're looking to go a little more Web 2.0 with the targeting style, you could set up a
fading-background ef ect. You know, that whole “you've done something, so a piece of the
page's background will go from yellow to white to let you know you've done it” thing. You can
do that fairly easily with :target and an animated GIF. Just create an animation that's a fade
from yellow to white (if that's your site's background color) and use it as a background image.

*:target { background : url(/pix/yellow-fade.gif) ;}

SPECIFICITY
It's hard to say three times quickly and can be even harder to thoroughly grasp, but it's the key
to understanding how CSS rules interact with each other.

Specii city is a numeric representation of the “specii c-ness” of a selector. h ere are three
things that are used to determine a selector's specii city:

Every element descriptor contributes 0,0,0,1.
Every class, pseudo-class, or attribute descriptor contributes 0,0,1,0.
Every ID descriptor contributes 0,1,0,0.

43

Don't freak out (yet)! Take a look at a few examples i rst.

div ul ul li

0,0,0,4 Four element descriptors

div.aside ul li

0,0,1,3 One class descriptor, three element descriptors

a:hover

0,0,1,1 One pseudo-class descriptor, one element descriptor

div.navlinks
a:hover

0,0,2,2 One pseudo-class descriptor, one class descriptor, two element

descriptors

#title em

0,1,0,1 One ID descriptor, one element descriptor

h1#title em

0,1,0,2 One ID descriptor, two element descriptors

Hopefully, this begins to give you an idea of how specii city values are built up. Now, why the
commas? Because each “level” of specii city value stands on its own, so to speak. h us, a
selector with a single class descriptor has more specii city than a selector with 13 element
descriptors. h eir values would be:

.aside /* 0,0,1,0 */
div table tbody tr td div ul li ol li ul li pre /* 0,0,0,13 */

h e “1” in the third position of the i rst selector beats the “0” in the third position of the
second selector. Given that fact, the “13” in the fourth position of the second selector means