Selektor potomka w CSS

Selektor potomka > pozwala wybierać elementy na podstawie bezpośredniego zagnieżdżenia w sobie.

Składnia

selektor1 > selektor2 {
	
}

Przykład

Odnówmy się do wszystkich tagów b, bezpośrednio znajdujących się wewnątrz tagów p, i pokolorujmy je na czerwono:

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

p > b {
	color: red;
}

Przykład

Odnówmy się do wszystkich tagów b, bezpośrednio znajdujących się wewnątrz elementów z klasą .block, i pokolorujmy je na czerwono:

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

.block > b {
	color: red;
}

Przykład

Odnówmy się do wszystkich elementów z klasą .elem, bezpośrednio znajdujących się wewnątrz elementów z klasą .block, i pokolorujmy je na czerwono:

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

.block > .elem {
	color: red;
}

Zobacz też

Selektor kontekstowy,
który pozwala wybrać element na podstawie jego rodzica
Selektor sąsiedniego elementu,
który pozwala wybrać element na podstawie jego sąsiada
Selektor rodzeństwa,
który pozwala wybrać elementy po zadanym
Selektor uniwersalny,
który pozwala wybrać wszystkie elementy