CSS Descendant Selector

Nageslachtsselector (descendant selector) wordt ook wel inclusie selector genoemd.

Nakomelingselectors kunnen elementen kiezen die nakomelingen zijn van een bepaald element.

Elementen kiezen op basis van context

We kunnen nakomelingselectors definiëren om regels te maken die alleen in bepaalde documentstructuren werken en niet in andere.

Bijvoorbeeld, als u alleen de em-elementen in de h1-wereld wilt stylen, kan het als volgt worden geschreven:

h1 em {color:red;}

Deze regel maakt de tekst van de em-elementen die nakomelingen zijn van een h1-element rood. Andere em-tekst (zoals tekst in alinea's of blok citaten) wordt niet door deze regel geselecteerd:

<h1>Dit is een <em>belangrijke</em> kop.</h1>
<p>Dit is een <em>belangrijke</em> alinea.</p>

Try It Yourself

Natuurlijk kunt u ook een class-eigenschap plaatsen op elk em-element dat in h1 wordt gevonden, maar duidelijk is dat nakomelingselectors efficiënter zijn.

Grammaticale uitleg

In nakomelingselectors bevat de linkerkant van de regel een of meerdere selectors gescheiden door spaties. De spatie tussen de selectors is een combinator. Elke spatiecombinator kan worden geïnterpreteerd als '... gevonden in ...', '... als deel van ...', '... als nakomeling van ...', maar het is vereist om de selector van rechts naar links te lezen.

Daarom kan de selector h1 em worden geïnterpreteerd als ' elk em-element dat een nakomeling van een h1-element is'. Als de selector van links naar rechts wordt gelezen, kan het worden gezegd als volgt: ' Alle h1 die een em bevat, toepassen van de volgende stijl op dat em'.

Specifieke toepassing

Nakomelingselectors zijn uiterst krachtig. Met hen kunnen taken worden gerealiseerd die in HTML onmogelijk zijn.

Stel dat er een document is met een zijbalk en een hoofdgebied. De achtergrond van de zijbalk is blauw, de achtergrond van het hoofdgebied is wit, en beide gebieden bevatten een lijst met links. Alle links kunnen niet blauw worden ingesteld, omdat anders de blauwe links in de zijbalk niet meer zichtbaar zijn.

De oplossing is het gebruik van nakomelingselectors. In dit geval kan de class-eigenschap van de div die de zijbalk bevat worden ingesteld op 'sidebar', en de class-eigenschap van het hoofdgebied op 'maincontent'. Vervolgens wordt de volgende stijl geschreven:

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 nesting level of em.

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

<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