CSS Descendant Selector

Η επιλογή καταληκτικής γενιάς (descendant selector) είναι γνωστή και ως επιλογέας περιεχομένου.

Child selectors can select elements that are descendants of a certain element.

Element selection based on context

We can define child selectors to create some rules that work in some document structures and do not work 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 put a class attribute on each em element found in h1, but it is obviously more efficient to use the child selector.

Grammar explanation

In the child selector, 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 ...', '... 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 that contain em will apply the following style to the em'.

Specific application

The function of the child selector 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 background of the sidebar is blue, and the background of the main area is white. Both areas contain a list of links. You cannot set all links to blue, because in this way, the blue links in the sidebar cannot be seen.

The solution is to use the child selector. In this case, you can specify the class attribute with the value 'sidebar' for the div that contains 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 spacing 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 from the following tags:

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

Try It Yourself