CSS avledande väljare

Avledande väljare

Genom att definiera stilar baserat på elementets kontextuella position kan du göra märkning mer enkel.

I CSS1 kallas väljare som använder detta sätt att tillämpa regler kontextuella väljare (contextual selectors), eftersom de är beroende av kontexten för att tillämpa eller undvika en regel. I CSS2 kallas de avledande väljare, men oavsett vad du kallar dem har de samma effekt.

Avledande väljare tillåter dig att bestämma stilen för en etikett baserat på kontexten i dokumentet. Genom att använda avledande väljare på ett smart sätt kan vi göra HTML-koden mer ren.

Till exempel, om du vill att strong-elementet i listan ska vara kursivt istället för vanligt fet, kan du definiera en avledande väljare på detta sätt:

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

Observera kontexten för den blå kod som är markerad som <strong>:

<p><strong>Jag är fet text, inte kursiv, eftersom jag inte är i listan, så denna regel gäller inte för mig</strong></p>
<ol>
<li><strong>Jag är kursiv. Detta beror på att strong-elementet finns inom li-elementet.</strong></li>
<li>Jag är normal text.</li>
</ol>

I exemplet ovan är det endast strong-elementet inom li-elementet som har kursiv stil, det är inte nödvändigt att definiera en särskild class eller id för strong-elementet, vilket gör koden mer enkel.

Se också följande CSS-regler:

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

Nedan är HTML som påverkas:

<p>Det starkt betonade ordet i denna paragraf är<strong>röd</strong>.</p>
<h2>Denna under rubrik är också röd.</h2>
<h2>Det starkt betonade ordet i denna under rubrik är<strong>blue</strong>.</h2>

Relaterat innehåll

Om du behöver lära dig mer om avledande väljare, läs följande innehåll i CodeW3C.coms avancerade tutorial: