CSS Descendant Selector

The descendant selector, also known as the containing selector.

The child combinator can select elements that are descendants of a certain element.

Select Elements Based on Context

We can define child combinators to create some rules that take effect in some document structures but not in others.

For example, if you want to apply styles only to the em elements within the h1 element, you can write it like this:

h1 em {color:red;}

The above rule will change the text of the em elements that are descendants of the h1 element to red. Other em text (such as text in paragraphs or block quotes) will not be selected by this rule:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

Try It Yourself

Of course, you can also place a class attribute on each em element found in h1, but it is obviously more efficient to use the child combinator.

Grammar Explanation

In the child combinator, the selector on the left side of the rule includes two or more selectors separated by spaces. The space between selectors is a combinator. Each space combinator can be interpreted as '... found in ...', '... as part of ...', or '... as a descendant of ...', but it is required to read the selector from right to left.

Therefore, the h1 em selector can be interpreted as 'any em element that is a descendant of the h1 element'. If you want to read the selector from left to right, you can say it like this: 'All h1 elements containing em will apply the following style to the em'.

Specific Application

The child combinator is extremely powerful. With it, tasks that are impossible to achieve in HTML can become possible.

Assuming there is a document with a sidebar and a main area. The sidebar has a blue background, and the main area has a white background. Both areas contain a list of links. You cannot set all links to blue because in doing so, the blue links in the sidebar cannot be seen.

The solution is to use the child combinator. In this case, you can specify the class attribute with the value 'sidebar' for the div containing the sidebar, and set the class attribute value of the main area to 'maincontent'. Then write the following styles:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

There is an easily overlooked aspect of descendant selectors, that is, the hierarchical interval between two elements can be infinite.

For example, if written as ul em, this syntax will select all em elements inherited from the ul element, regardless of the depth of nesting.

Therefore, ul em will select all em elements in the following tags:

<ul>
  <li>List item 1</li>
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3</li>
        <ol>
          <li>List item 1-3-1</li>
          <li>List item</li> <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Try It Yourself