42 Chapter 4
Let’s say you’re creating a base style sheet and want to set a property on
the html element, which shouldn’t be altered. In this case, you would use
something like this:html:root { background-color: black; }The higher specificity gives precedence to this rule over any other rules
applied to the html element, meaning the following is ignored:html { background-color: white; }But it’s unlikely that you’ll need to use this in most situations.:not()
The negation pseudo-class :not() selects all elements except those that are
given as the value of an argument:E :not(F) {...}This rule selects all children of element E except for those of type F. For
example, to color all the immediate child elements of a div, except for p ele-
ments, you use this:div > :not(p) { color: red; }To see how useful :not() is, consider a situation where you have the fol-
lowing markup:<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc consectetur tempor justo...</p>
<p>Nunc porttitor malesuada cursus...</p>
</div>Now imagine you want to italicize all of the child p elements except for
the first one.
To do this with CSS2, you applied a style to all the p elements and then
applied a further style to reset the first element back to its previous state:p { font-style: italic; }
p:first-child { font-style: normal; }With :not(), you can reduce that to a single rule:p:not(:first-child) { font-style: italic; }The argument passed into :not() must be a simple selector—therefore
combinators (such as + and >) and pseudo-elements (which I discuss in
“Pseudo-elements” on page 45) are not valid values.