CSS jälkeläisvalitsin

Lapsivalitsin (descendant selector) tunnetaan myös sisältövalitsijana.

Jälkisukupolvia valitsin voi valita elementit, jotka ovat jossakin elementin jälkisukupolvia.

Valitse elementtejä kontekstin perusteella

Voimme määrittää jälkisukupolvia valitsinta luodaaksemme sääntöjä, jotka toimivat tietyissä dokumenttistruktuureissa mutta eivät toimi muissa.

Esimerkiksi, jos haluat soveltaa tyyliä vain h1-elementin em-elementteihin, voit kirjoittaa seuraavasti:

h1 em {color:red;}

Tämä sääntö muuttaa h1-elementin jälkisukupolvia olevien em-elementtien tekstin punaiseksi. Muita em-tekstejä (kuten kappaleita tai blokkitekstejä) ei valitsin valitse:

<h1>Tämä on tärkeä <em>otsikko</em></h1>
<p>Tämä on tärkeä <em>paragraphi</em>.</p>

Kokeile itse

Totta kai, voit myös asettaa jokaiselle em-elementille, joka löytyy h1-elementistä, luokka-ominaisuuden, mutta ilmeisesti jälkisukupolvia valitsin on tehokkaampi.

Syntaksin selitys

Jälkisukupolvia valitsijassa säännön vasemmassa päässä oleva valitsin sisältää kaksi tai useampaa valitsinta, jotka ovat erotettu välilyönnillä. Välilyönti on yhdistin. Jokainen välilyöntiyhdistin voidaan tulkita '... löytyy...','... on osa...','... on jälkisukupolvi...', mutta valitsinta on lueteltava oikealta vasemmalle.

Näin ollen h1 em valitsin voidaan tulkita 'kuten h1-elementin jälkisukupolvia ovat kaikki em-elementit'. Jos valitsinta luetellaan vasemmalta oikealle, voidaan käyttää seuraavaa lausuntoa: 'Kaikki em, jotka sisältyvät h1-elementtiin, soveltavat tätä tyyliä tähän em'.

Tarkemmat sovellukset

Jälkisukupolvia valitsin on erittäin tehokas. Sen avulla voidaan tehdä mahdolliseksi HTML:ssä mahdotonta.

Oletetaan, että on olemassa dokumentti, jossa on sivupalkki ja pääalue. Sivupalkin tausta on sininen, pääalueen tausta on valkoinen, molemmat alueet sisältävät linkkiluettelon. Kaikkia linkkejä ei voida tehdä sinisiksi, koska niin sivupalkin siniset linkit eivät ole näkyvissä.

Ratkaisu on käyttää jälkisukupolvia valitsinta. Tässä tapauksessa voidaan määrittää sisältävän sivupalkin div:lle luokka-ominaisuus arvolla sidebar ja asettaa pääalueen luokka-ominaisuuden arvoksi maincontent. Sitten kirjoitetaan seuraavaa tyyliä:

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

Jälkeläisvalitsijoista on yksi helposti huomioimaton näkökohta, nimittäin että kahden elementin välinen hierarkiaetäisyys voi olla ääretön.

Esimerkiksi, jos kirjoitetaan ul em, tämä syntaksi valitsisi kaikki ul-elementistä perityt em-elementit riippumatta em:n syventymisasteesta.

Siksi ul em valitsisi kaikki em-elementit seuraavista merkinnöistä:

<ul>
  <li>Listaus kohta 1</li>
    <ol>
      <li>Listaus kohta 1-1</li>
      <li>Listaus kohta 1-2</li>
      <li>Listaus kohta 1-3</li>
        <ol>
          <li>Listaus kohta 1-3-1</li>
          <li>Listaus kohta</li> <em>1-3-2</em></li>
          <li>Listaus kohta 1-3-3</li>
        </ol>
      </li>
      <li>Listaus kohta 1-4</li>
    </ol>
  </li>
  <li>Listaus kohta 2</li>
  <li>Listaus kohta 3</li>
</ul>

Kokeile itse