Using Advanced Selectors - Beginning CSS3 - page 293

The :first-child and :last-child pseudo-classes are useful for styling navigation bars. The following
styles have been added to the drop-down menu from Chapter 11 (see menu.html and styles/menu.css in the
ch13 folder):

#nav > li:first-child a {
border-radius: 10px 0 0 10px;
}
#nav > li:last-child a {
border-radius: 0 10px 10px 0;
}
#nav ul li:first-child a {
border-radius: 10px 10px 0 0;
}
#nav ul li:last-child a {
border-radius: 0 0 10px 10px;
}

The first two selectors target the links in the first and last list items at the top level of the nav unordered list
by using a child selector in combination with the :first-child and :last-child pseudo-classes. The last two
selectors target links in the first and last list items of submenus. Figure 13-2 shows how these styles add rounded
corners to the top-level menu and submenus.

Figure 13-2. The :first-child and :last-child pseudo-classes target the first and last menu items

Selecting Elements Based on their Position in a Series
What if you want to select an element that's not first or last, but you know its position in a series? The four
pseudo-classes listed in Table 13-2 are designed for such situations.

Table 13-2. Pseudo-classes that Select Elements from a Series

Pseudo-class Description

:nth-child() Selects the nth -child of its parent using the value between the parentheses.

:nth-last-child() Selects the nth -child of its parent counting from the last one.

:nth-of-type()

Selects the nth sibling of its type.

:nth-last-of-type() Selects the nth sibling of its type counting from the last one.