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

nothing at all (in this very limited example). h e comma separators help keep this clear;
otherwise, the selectors might be written “10” and “13,” leading to the erroneous impression
that the latter is more specii c. (h is actually was a common misapprehension in the early
days of CSS, before the comma-separated notation was settled upon.)
h ere's another common misconception, which is that structural proximity matters to
specii city. For example, suppose you write the following:
ul li { font-style : normal ;}
html li { font-style : italic ;}
Which will win? h ey both have two element descriptors, which means they both have
specii city of 0,0,0,2. h erefore, the last one written wins. h e fact that the ul element is closer
to the li element in the document structure than the html element does not matter in the
slightest. Specii city is a straight numeric value. It does not evaluate the page structure in any
way. h us, the list items all get to be italic, because the last rule wins when specii cities are
equal.
You're probably wondering what the i rst zero in the specii city notation is for, given that I said
three things contribute to specii city. h at i rst zero is used for inline styles, and only inline
styles. h erefore, given the following style and markup, the div 's background will be blue.
div#header { background : purple ;} /* 0,1,0,0 */
44
< div id="header" style="background: blue;"> <!-- 1,0,0,0 -- >
IMPORTANCE
h ere is something that overrides specii city, and that's !important . If you're a programmer,
I need to disabuse you of a misunderstanding right now: that does not mean “not important.”
h e way this works is that you can mark any individual declaration as important. Here's a
basic example:
a:hover { color : red !important ; text-decoration : none ;}
In that example, color: red has been marked important, but text-decoration:
none has not. Every declaration you want to mark as being important needs its own separate
!important .
Basically, any important declaration will override any non-important declaration, period—
end of story. Given the following, the result will be a green link:
div#gohome a#home { color : red ;}
div a { color : green !important ;}
< div id="gohome"> < a id="home" href=" /" >Home< / a> </ div>