Descendant Selectors

Descendant Selectors

Descendant selectors are used to select elements that are descendants of another element.

For example, in the HTML sample shown in Listing 3.1, three <a> elements are descendants of the <li> elements. To target these three <a> elements only, and not all other <a> elements, a descendant selector can be used as shown in Listing 3.6. This selector targets any <a> element that is nested inside an <li> element.

Listing 3.6. CSS Code Containing Descendant Selector

li a
{
     color: green;
}

Descendant selectors do not have to use direct descendant elements. For example, the <a> element is a descendant of <div id="nav"> as well as the <li> element. This means that #nav a can be used as a selector as well (see Listing 3.7).

Listing 3.7. CSS Code Containing Descendant Selector

#nav a
{
     color: red;
}

Descendant selectors also can include multiple levels of descendants to be more specific as shown in Listing 3.8.

Listing 3.8. CSS Code Containing Descendant Selector

#nav ul li a
{
     color: green;
}