CSS efterkommande väljare

Avkommandoseletorn (descendant selector) kallas också innehållsval.

Efterkommande selektorer kan välja element som är efterkommande av ett element.

Välj element baserat på kontext

Vi kan definiera efterkommande selektorer för att skapa regler som fungerar i vissa dokumentstrukturer men inte i andra.

För att till exempel tillämpa stilen endast på em-element inom h1-element, kan du skriva:

h1 em {color:red;}

Regeln ovan kommer att ändra texten för em-element som är efterkommande av h1-element till röd. Andra em-texter (som i stycken eller blockcitat) kommer inte att väljas av denna regel:

<h1>Detta är en <em>important</em> rubrik</h1>
<p>Detta är en <em>important</em> stycke.</p>

Prova själv

Naturligtvis kan du också lägga till ett class-attribut på varje em-element som finns i h1, men det är tydligt att efterkommande selektorer är mer effektiva.

Grammatisk förklaring

I efterkommande selektorer inkluderar vänstra änden av regeln två eller flera valare som är avskilda av mellanslag. Mellanslaget mellan valarna är en kombinator. Varje kombinator kan tolkas som '... hittas i ...', '... är en del av ...', '... är en efterkommande av ...', men det måste läsas från höger till vänster.

Så kan h1 em-selektorn tolkas som 'alla em-element som är efterkommande av h1-element'. Om du läser utvalaren från vänster till höger kan du säga följande: 'Alla h1 som innehåller em kommer att tillämpa följande stil på detta em'.

Specifik tillämpning

Efterkommande selektorer är mycket kraftfulla. Med dem kan du göra det som inte är möjligt att uppnå i HTML.

Anta att du har ett dokument som innehåller en sidopanel och ett huvudområde. Bakgrunden för sidopanelen är blå och bakgrunden för huvudområdet är vit, båda områdena innehåller länklistor. Du kan inte sätta alla länkar till blått, eftersom så blir de blå länkarna i sidopanelen osynliga.

Lösningen är att använda efterkommande selektorer. I detta fall kan du ange class-attributet sidebar med värde sidebar för div:en som innehåller sidopanelen och sätta class-attributet maincontent för huvudområdet. Därefter skriver du följande stil:

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

En ofta överglömd aspekt av efterkommande väljare är att mellanrummet mellan två element kan vara obegränsat.

Till exempel, om skrivet ul em, kommer denna syntax att välja alla em-element som ärver från ul-elementet, oavsett hur djupt em:n är inbäddad.

Därför kommer ul em att välja alla em-element i följande markeringar:

<ul>
  <li List item 1</li>
    <ol>
      <li List item 1-1</li>
      <li List item 1-2</li>
      <li List item 1-3</li>
        <ol>
          <li List item 1-3-1</li>
          <li List item</li> <em>1-3-2</em></li>
          <li List item 1-3-3</li>
        </ol>
      </li>
      <li List item 1-4</li>
    </ol>
  </li>
  <li List item 2</li>
  <li List item 3</li>
</ul>

Prova själv