HTML and CSS Reference
In-Depth Information
As you can see, the
*=
operator checks the
href
attribute of each hyperlink element to see if it contains
the word
google
. If so, the hyperlink color is set to orange. Here's an example of a matching hyperlink:
The specified string can exist at the start of the attribute value, at the end of the attribute value, or
anywhere in between.
Structural Pseudo-Classes
Sometimes you want to apply styling to elements based on their structural position in the DOM tree. For
example, you may want to apply certain styling to the first and last rows of a table. In such cases, structural
pseudo-classes come in handy. Table 13-2 lists the structural pseudo-classes.
Table 13-2.
Structural Pseudo-Classes
Pseudo-Class
Description
:root
Matches an element that is the root of the document (typically the
<html>
element)
:first-child
Matches any element that is the first child of its parent
:last-child
Matches any element that is the last child of its parent
:nth-child
Matches any element that is the
n
th child of its parent
:nth-last-child
Matches any element that is the
n
th child of its parent, counting from the last child
:only-child
Matches any elements that is the only child of its parent
:first-of-type
Matches any element that is the first sibling of its type
:last-of-type
Matches any element that is the last sibling of its type
:nth-of-type
Matches any element that is the
n
th sibling element of its type
:nth-last-of-type
Matches any element that is the
n
th sibling element of its type, counting from the
last child
:only-of-type
Matches any element that is the only sibling of its type
:empty
Matches any element that has no children
Let's see some examples of using structural pseudo-classes. Suppose you wish to display the last row
of an HTML table in a certain color. You can do so using the
:last-child
pseudo-class, as shown here:
tr:last-child {
background-color:#808080;
font-size:20px;
}
This CSS selector selects all
<tr>
elements that are the last child of their parent (that is, the
<table>
element) and applies to them the specified background color and font size. Figure 13-2 shows how a table
looks with the styling applied.
