CSS Descendant Selector

Afgeleide selectoren

Door de stijl te definiëren op basis van de contextuele relatie van een element in zijn positie, kun je de markering nog netter maken.

In CSS1 wordt de selector die deze regel toepast een contextuele selector (contextual selectors) genoemd, omdat ze afhankelijk zijn van de contextuele relatie om een regel toe te passen of te vermijden. In CSS2 worden ze afgeleide selectoren genoemd, maar ongeacht de naam die je er aan geeft, hun functie is hetzelfde.

Afgeleide selectoren laten je toe om de stijl van een tag te bepalen op basis van de contextuele relatie in het document. Door afgeleide selectoren op een verantwoorde manier te gebruiken, kunnen we HTML-code nog netter maken.

Bijvoorbeeld, als je de strong-elementen in de lijst wilt schuin schrijven in plaats van vet, kun je een afgeleide selectie definiëren:

li strong 
    font-style: italic;
    font-weight: normal;

Let op de contextuele relatie van de blauwe code die is gemarkeerd als <strong>:

<p><strong>Ik ben vet geschreven, niet schuin geschreven, omdat ik niet in de lijst sta, dus deze regel werkt niet voor mij</strong></p>
<ol>
<li><strong>Ik ben schuin geschreven. Dit komt omdat de strong-element binnen de li-element staat.</strong></li>
<li>Ik ben een normale lettertype.</li>
</ol>

In het bovenstaande voorbeeld is alleen de stijl van de strong-element binnen de li-elementen schuin, er is geen speciale class of id nodig voor de strong-element, de code is dus eenvoudiger.

Take a look at the following CSS rules:

strong {
     color: red;
     
h2 {
     color: red;
     
h2 strong 
     color: blue;
     




The strongly emphasized word in this subhead isblue

Related Content

If you need to learn more about descendant selectors, please read the following content in the advanced tutorial on CodeW3C.com: