Gyermek szelektor a CSS-ben

A gyermek szelektor > lehetővé teszi az elemek kiválasztását közvetlen egymásba ágyazottságuk alapján.

Szintaxis

szelektor1 > szelektor2 {
	
}

Példa

Forduljunk minden b taghez, amelyek közvetlenül p tagben helyezkednek el, és színezzük pirosra:

<p>
	szöveg <b>+</b>
</p>
<p>
	szöveg <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Példa

Forduljunk minden b taghez, amelyek közvetlenül a .block osztállyal rendelkező elemekben helyezkednek el, és színezzük pirosra:

<p class="block">
	szöveg <b>+</b>
</p>
<p class="block">
	szöveg <i><b>-</b></i>
</p>
<p>
	szöveg <b>-</b>
</p>

.block > b {
	color: red;
}

Példa

Forduljunk minden .elem osztállyal rendelkező elemhez, amelyek közvetlenül a .block osztállyal rendelkező elemekben helyezkednek el, és színezzük pirosra:

<p class="block">
	szöveg <span class="elem">+</span>
</p>
<p class="block">
	szöveg <i><span class="elem">-</span></i>
</p>
<p class="block">
	szöveg <span>-</span>
</p>
<p>
	szöveg <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Lásd még

Összefüggő szelektor,
amely lehetővé teszi egy elem kiválasztását szülője alapján
Szomszédos testvér szelektor,
amely lehetővé teszi egy elem kiválasztását szomszédja alapján
Általános testvér szelektor,
amely lehetővé teszi az elemek kiválasztását egy adott elem után
Univerzális szelektor,
amely lehetővé teszi az összes elem kiválasztását