HTML and CSS Reference
In-Depth Information
Figure 1-43. Styling table cells that aren't in the table's header
One thing to watch out for is that you can have situations where rules combine in
unexpected ways, mostly because we're not used to thinking of selection in the negative.
Consider this very simple test case:
div:not(.one) p {font-weight: normal;}
div.one p {font-weight: bold;}
<div class="one">
<div class="two">
<p>I'm a paragraph!</p>
</div>
</div>
The paragraph will be boldfaced, not normal-weight. This is because both rules match:
the
p
element is descended from a
div
whose
class
does not contain the word
one
(
<div
class="two">
), but it is
also
descended from a
div
whose
class
contains the word
one
.
Both rules match, and so both apply. Since there is a conflict, the cascade is used to
resolve the conflict, and the second rule wins. The structural arrangement of the
markup, with the
div.two
being “closer” to the paragraph than
div.one
, is irrelevant.
An interesting aspect of the negation pseudo-class is that it, like the
universal selector, does not count towards specificity, which we'll cover
later in the topic.
Pseudo-Element Selectors
Much as pseudo-classes assign phantom classes to anchors, pseudo-elements insert
fictional elements into a document in order to achieve certain effects. Four pseudo-
elements are defined in CSS, and they let you style the first letter of an element, style
the first line of an element, and both create and style “before” and “after” content.
