Aiemmin todettiin, että valitsimissa voidaan käyttää tagien nimiä, elementin id:tä, elementin luokkaa, pseudo-luokkaa, pseudo-elementtiä tai elementtien attribuutteja ja niiden arvoja. Valitsin koostuu näiden yhdistelmistä, joissa samaan elementtiin viittaavat osat on kirjoitettu yhteen, sisäkkäin olevat elementit välilyönnillä eroteltuina peräkkäin ja rinnakkaiset vaihtoehtoiset valitsimet samalle säännölle on eroteltu pilkulla.

Nyt lisätään valitsinten käsittelyyn vielä muutama keino, joilla valitsimen kohdistamista haluttuun elementtiin voidaan tarkentaa.

Välitön jälkeläinen

Välilyönnillä eroteltuna peräkkäin kirjoitetut valitsimet tarkoittavat siis elementtien sisäkkäisyyttä. Eli article .important tarkoittaa siis <article>-tagin sisällä olevaa elementtiä, jolla on luokka important. Sillä ei ole väliä, onko .important-elementti heti <article>-elementin lapsi vai onko välissä yksi tai useampikin taso.

article .important {background-color: #faa;}

<article>
    <p class="important">Lorem ipsum dolor sit amet, consectetur...</p>
    <p>Lorem ipsum <span class="important">dolor sit</span> amet, consectetur...</p>
</article>

Jos kuitenkin halutaan valitsimessa määrätä, että jokin elementti on toisen välitön jälkeläinen, merkitään tämä jälkeläisyysrelaatio >-merkillä. Siis välittömästi <article>-elementin lapsena oleva .important-elementti valitaan valitsimella article > .important.

article > .important {background-color: #faa;}

<article>
    <p class="important">Lorem ipsum dolor sit amet, consectetur...</p>
    <p>Lorem ipsum <span class="important">dolor sit</span> amet, consectetur...</p>
</article>

Seuraava elementti

Toinen hyödyllinen merkintä on seuraajarelaatio, jota merkitään +-merkillä. Tämä tarkoittaa, että esimerkiksi important-luokalla merkityn elementin jälkeen tulevaan <p>-elementtiin voidaan viitata valitsimella .important + p.

.important + p {background-color: #ffa;}

<article>
    <p class="important">Lorem ipsum dolor sit amet, consectetur...</p>
    <p>Lorem ipsum dolor sit amet, consectetur...</p>
</article>