Pseudo-classes and Pseudo-elements 41
Figure 4-7: Highlighting applied with the :target pseudo-class
:empty
The :empty pseudo-class selects an element that has no children, including
text nodes. Consider this markup:
<tr>
<td></td>
<td>Lorem ipsum</td>
<td><span></span></td>
</tr>
If you apply this CSS rule:
td:empty { background-color: red; }
the rule is only applied to the first td element, as the other two contain a
text node and a child element, respectively.
:root
The :root pseudo-class selects the first element in a document tree, which
is only really handy if you’re adding a style sheet to XML documents—in
HTML, the root will always be the html element. One small advantage of
using :root in HTML is that you can use it to give a higher specificity to the
html element, which could be useful if you need to override the simple type
selector:
html {...} /* Specificity: 1; */
html:root {...} /* Specificity: 2; */
