HTML and CSS Reference
In-Depth Information
The
:empty
pseudo-class, on the other hand, selects elements that are completely empty. The definition of
empty is very strict: the element must contain nothing between the opening and closing tags—not even a space.
The following styles in negative.html demonstrate the
:not()
and
:empty
pseudo-classes:
tr:not(:first-child) > th {
text-align:left;
}
td:empty {
background-color:#D8F2D7;
}
By default, browsers center the text in
<th>
cells. So, the first style rule left-aligns the text in all table header
cells except those in the first row. The second style rule assigns a different background color to empty cells.
Figure
13-13
shows the result in a modern browser. In IE 8 and older browsers, the table headers in rows 2-5 are
centered, and the empty cells have the same background color as those with data.
Figure 13-13.
The headers in the first row and the empty cells are styled differently
Other Selectors
You've now covered the overwhelming majority of CSS3 selectors. The section covers the remaining selectors that
don't conveniently fit into one of the other categories.
Pseudo-classes
There are just three more pseudo-classes, which are listed in Table
13-6
. The first two are new to CSS3. They're
supported by all modern browsers, but not by IE 8 and earlier.
Table 13-6.
Miscellaneous Pseudo-classes
Pseudo-class
Description
:root
Matches the root element of the document. In HTML, this is always the
<html>
element.
:target
Matches the target of a URL fragment, such as an ID or named anchor.
:lang()
Matches elements based on their language. Supported by IE 8 + .
The
:root
pseudo-class is mainly intended for use with XML.
