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;} p {font-weight: bold;}
<div class="one">
<div class="two">
<p>I'm a paragraph!</p>
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 , 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.
Search WWH ::

Custom Search