Descendent selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id of class) binnen een andere tag (of id of class) zit, bijvoorbeeld “ul li”. Maar je kunt veel nauwkeuriger stijlen zonder dag je allemaal classes hoeft aan te maken.

Voorbeeld van een descendent selector:

ul li{

…. doe iets …

}

Deze ben je wellicht wel eens tegengekomen. Hiermee zeg je: alle list elementen binnen een unordered list moeten iets doen. Dus ook wanneer er een submenu in dit menu is.

Maar soms wil je nog nauwkeuriger zijn. Bijvoorbeeld wanneer je een list in een list hebt. In dat geval kan het zijn dat je wilt dat de 2e list anders gestyled wordt dan de eerste.

ul > li{

…. doe iets …

}

roept in zo’n geval alleen het eerste list item aan binnen de ul. Mocht er een list element zijn die zelf weer een list maakt (een submenu dus) dan zal deze niet reageren.

In de afbeelding hieronder (via csstricks.com) is het goed te zien. Links de gewone descendent; alle list items worden beïnvloed. Rechts de child selector; alleen het bovenste item wordt beïnvloed.

Voorbeeld van csstricks.com waarin het verschil tussen een child en descendant duidelijk wordt gemaakt.

Voorbeeld van csstricks.com waarin het verschil tussen een child en descendant duidelijk wordt gemaakt.

 

Filmpje kijken?

Twee tutorials van CSS Tutorials. De eerste over child en sibling selectors.

 

En een andere waarin het nth-child verhaal ook uitgelegd wordt.

Links

CSS tricks heeft een goed overzicht gegeven over wat child en sibling selectoren zijn en wat de precieze verschillen zijn. Het is een Engelstalige website maar goed te volgen.