CSS efterkommer valgudtryk

Efterkommelsevælger (descendant selector) kaldes også indholdsvælger.

Etterkommerselskere kan velge elementer som er etterkommere av et element.

Velg elementer basert på kontekst

Vi kan definere etterkommerselskere for å lage regler som bare virker i visse dokumentstrukturer og ikke i andre.

For eksempel, hvis du bare vil bruke stilen til em-elementer i h1-elementer, kan du skrive slik:

h1 em {color:red;}

Denne regelen vil endre teksten til em-elementer som er etterkommere av h1-elementer til rød. Andre em-tekster (som i avsnitt eller blokkutdrag) vil ikke bli valgt av denne regelen:

<h1>Dette er en <em>betydelig</em> overskrift</h1>
<p>Dette er en <em>betydelig</em> avsnitt.</p>

Prøv det selv

Selvfølgelig kan du også sette en class-attributt på hver em-element som du finner i h1, men det er klart at etterkommerselskere er mer effektive.

Grammatikkforklaring

I etterkommerselskere inkluderer venstre side av regelen to eller flere selektorer adskilt av mellomrom. Mellomrommene mellom selektorene er en kombinator. Hver kombinator kan tolkes som '... finnes i ...', '... er en del av ...', '... er etterkommer av ...', men det må leses fra høyre til venstre.

Derfor kan h1 em-selektoren tolkes som 'alle em-elementer som er etterkommere av h1-elementer'. Hvis du vil lese selektoren fra venstre til høyre, kan du si det slik: 'Alle h1 som inneholder em vil anvende denne stilen på det em'.

Spesifikke anvendelser

Etterkommerselskere er ekstremt kraftige. Med dem kan du gjøre oppgaver som ikke er mulig i HTML.

Anta at du har en dokument som inneholder en sidestil og en hovedområde. Bakgrunnen for sidestilen er blå, og bakgrunnen for hovedområdet er hvit. Begge områdene inneholder lenkelister. Du kan ikke sette alle lenkene til blå, fordi da vil de blå lenkene i sidestilen ikke være synlige.

Løsningen er å bruke etterkommerselskere. I dette tilfellet kan du sette class-attributtverdien til sidebar for div som inneholder sidestilen, og sett class-attributtverdien til maincontent for hovedområdet. Deretter skriver du følgende stil:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Der er en let overset side ved efterkommer valgudtryk, nemlig at mellemrummet mellem to elementer kan være ubegrænset.

For eksempel, hvis skriftsproget er ul em, vil denne syntaks vælge alle em elementer, der arver fra ul elementet, uanset ems dybde af indlejring.

Derfor vil ul em vælge alle em elementer i følgende mærker:

<ul>
  <li>Listen element 1</li>
    <ol>
      <li>Listen element 1-1</li>
      <li>Listen element 1-2</li>
      <li>Listen element 1-3</li>
        <ol>
          <li>Listen element 1-3-1</li>
          <li>Listen element</li> <em>1-3-2</em></li>
          <li>Listen element 1-3-3</li>
        </ol>
      </li>
      <li>Listen element 1-4</li>
    </ol>
  </li>
  <li>Listen element 2</li>
  <li>Listen element 3</li>
</ul>

Prøv det selv