Podrejeni izbirnik v CSS

Podrejeni izbirnik > omogoča izbiro elementov glede na neposredno gnezdenje drug v drugega.

Sintaksa

izbirnik1 > izbirnik2 {
	
}

Primer

Obrnimo se na vse oznake b, ki se neposredno nahajajo znotraj oznak p, in jih obarvajmo rdeče:

<p>
	text <b>+</b>
</p>
<p>
	text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Primer

Obrnimo se na vse oznake b, ki se neposredno nahajajo znotraj elementov z razredom .block, in jih obarvajmo rdeče:

<p class="block">
	text <b>+</b>
</p>
<p class="block">
	text <i><b>-</b></i>
</p>
<p>
	text <b>-</b>
</p>

.block > b {
	color: red;
}

Primer

Obrnimo se na vse elemente z razredom .elem, ki se neposredno nahajajo znotraj elementov z razredom .block, in jih obarvajmo rdeče:

<p class="block">
	text <span class="elem">+</span>
</p>
<p class="block">
	text <i><span class="elem">-</span></i>
</p>
<p class="block">
	text <span>-</span>
</p>
<p>
	text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Glejte tudi

Kontekstni izbirnik,
ki omogoča izbiro elementa glede na njegovega starša
Sosednji izbirnik,
ki omogoča izbiro elementa glede na njegovega soseda
Sorodni izbirnik,
ki omogoča izbiro elementov za danim
Univerzalni izbirnik,
ki omogoča izbiro vseh elementov