Child selectoren

Over child en sibling selectoren

Een descendent selector is een selector waarmee je aangeeft wat er moet gebeuren wanneer een bepaalde tag (of id / class) binnen een andere tag (of id / class) zit. Door descendent selectoren te gebruiken hou je de ruimte om elementen te stijlen wanneer je geen class of id kunt toevoegen. Bijvoorbeeld wanneer je werkt met WordPress. Hierbij genereert WordPress PHP code en kan ik niet ergens een class tussen voegen.

Een descendent is bijvoorbeeld:

ul li{

…. doe iets …

}

Deze ben je wellicht wel eens tegengekomen. Hiermee zeg je: alle list elementen binnen een unordered list moeten iets doen.

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 zijn waarin weer een ul en een list zit 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.

Y. Bruin

In het voorbeeld hierna heb ik een horizontaal menu wat op sommige punten een dropdown moet krijgen. Echter, ik wil dat de dropdown anders gestyled wordt.