CSS Afledte Vælger

Afdækkende vælger

Ved at definere stilen baseret på elementets kontekst kan du gøre mærkerne mere enkle.

I CSS1 blev vælgerne, der anvender regler på denne måde, kaldt kontekstuelle vælgere (contextual selectors), fordi de afhænger af konteksten for at anvende eller undgå regler. I CSS2 kaldes de afledte vælgere, men uanset hvad du kalder dem, har de samme funktioner.

Afdækkende vælger tillader dig at bestemme stilen for et element baseret på konteksten i dokumentet. Ved at bruge afledte vælgere på en passende måde kan vi gøre HTML-koden mere struktureret.

For eksempel, hvis du vil have, at strong-elementerne i listen skal være skråstillede i stedet for almindelige fed skrift, kan du definere en afledt vælger på denne måde:

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

Bemærk konteksten af den blå kode, der er markeret med <strong>:

<p><strong>Jeg er fed skrift, ikke skråstillet, fordi jeg ikke er i listen, så denne regel gælder ikke for mig</strong></p>
<ol>
<li><strong>Jeg er skråstillet. Dette skyldes, at strong-elementet er placeret inde i li-elementet.</strong></li>
<li>Jeg er normal skrift.</li>
</ol>

I eksemplet ovenfor er det kun strong-elementerne i li-elementerne, der er skråstillet, og der er ingen behov for at definere en speciel class eller id for strong-elementerne, hvilket gør koden mere enkel.

Se også nedenstående CSS-regler:

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

Her er HTML'en, som det påvirker:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

Relateret Indhold

Hvis du har brug for at lære mere om afledte vælger, så læs følgende indhold i CodeW3C.com's avancerede tutorials: