CSS lapsivalitsimet
- Edellinen sivu CSS jälkeläisvalitsimet
- Seuraava sivu CSS seuraava veljen valitsimet
Vastaavasti kuin jälkeläisivalitsijoihin (Descendant selectors), alielementtifiltterit (Child selectors) voivat valita vain tietyn elementin alielementit.
Valitse alielementti
Jos et halua valita minkään jälkeläisien elementtejä, vaan haluat supistaa valinnan, valitse vain tietyn elementin alielementit, käytä alielementtifiltteriä (Child selector).
Esimerkiksi, jos haluat valita vain h1-elementin alielementteinä olevat strong-elementit, voit kirjoittaa seuraavasti:
h1 > strong {color:red;}
Tämä sääntö muuttaa ensimmäisen h1-elementin alla olevat kaksi strong-elementtiä punaiseksi, mutta toisen h1-elementin strong ei ole vaikuttanut:
<h1>Tämä on <strong>erittäin</strong> <strong>erittäin</strong> tärkeää.</h1> <h1>Tämä on <em> todella <strong> erittäin</strong></em> tärkeää.</h1>
Syntaksin selitys
Olet varmasti huomannut, että lapsivalitsin käyttää suurempaa ympyrää (lapsivalitsinmerkkijono).
Lapsivalitsimen molemmilla puolilla voi olla välilyöntejä, mikä on valinnainen. Siksi seuraavat kirjoitustavat ovat kaikki sallittuja:
h1 > strong h1> strong h1 >strong h1>strong
Jos luetaan oikealta vasemmalle, valitsin h1 > strong voidaan tulkita siten, että "Valitaan kaikki strong-elementit, jotka ovat h1-elementin lapsia".
Johdannaisselaimien ja lapsiselaimien yhdistäminen
Katso seuraava valitsin:
table.company td > p
Yllä oleva valitsin valitsee kaikki p-elementit, jotka ovat td-elementin lapsia, ja tämä td-elementti perii table-elementistä, jolla on company-luokan ominaisuus.
- Edellinen sivu CSS jälkeläisvalitsimet
- Seuraava sivu CSS seuraava veljen valitsimet
