CSS Kind Element Selectors

In vergelijking met nakomelingenkeuzers kunnen nakomelingenkeuzers (Child selectors) alleen elementen kiezen die als nakomelingen van een bepaald element dienen.

Keuze van nakomelingen

Als je geen willekeurige nakomelingselementen wilt kiezen, maar de schaal wilt verkleinen om alleen de nakomelingen van een bepaald element te kiezen, gebruik dan de nakomelingenkeuze (Child selector).

Bijvoorbeeld, als je alleen de <strong>strong</strong> elementen wilt kiezen die als nakomelingen van de <h1> elementen dienen, kun je dit zo schrijven:

h1 > strong {color:red;}

Deze regel maakt de eerste twee <strong>strong</strong> elementen onder de eerste <h1> elementen rood, maar de <strong>strong</strong> in de tweede <h1> wordt niet beïnvloed:

<h1>Dit is <strong>zeer</strong> <strong>zeer</strong> belangrijk.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Probeer het zelf

Grammaticale uitleg

Je zou al moeten hebben opgemerkt dat de kindbinder een groter dan-teken gebruikt.

Er kunnen witruimtes zijn aan weerszijden van de kindbinder, wat optioneel is. Daarom zijn de volgende schrijfwijzen allemaal correct:

h1 > strong
h1> strong
h1 >strong
h1>strong

Als je van rechts naar links leest, kan de selector h1 > strong worden uitgelegd als “Kies alle strong-elementen die als onder-element van de h1-element zijn”.

Combinatie van nageslacht en kind selectors

Bekijk onderstaande selector:

table.company td > p

Deze selector kiest alle p-elementen die als onder-element van de td-element zijn, die zelf van de table-element erfde, en de table-element heeft een class-attribuut dat company bevat.