Dukterinis selektorius CSS

Dukterinis selektorius > leidžia pasirinkti elementus pagal tiesioginį įdėjimą vienas į kitą.

Sintaksė

selektorius1 > selektorius2 {
	
}

Pavyzdys

Paimkime visus b tagus, esančius tiesiogiai p taguose, ir nudažykime juos raudona spalva:

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

p > b {
	color: red;
}

Pavyzdys

Paimkime visus b tagus, esančius tiesiogiai elementuose su klase .block, ir nudažykime juos raudona spalva:

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

.block > b {
	color: red;
}

Pavyzdys

Paimkime visus elementus su klase .elem, esančius tiesiogiai elementuose su klase .block, ir nudažykime juos raudona spalva:

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

.block > .elem {
	color: red;
}

Taip pat žiūrėkite

Kontekstinis selektorius,
kuris leidžia pasirinkti elementą pagal jo pirminį elementą
Gretimasis seserinis selektorius,
kuris leidžia pasirinkti elementą pagal jo kaimyną
Bendrasis seserinis selektorius,
kuris leidžia pasirinkti elementus po nurodyto
Universalusis selektorius,
kuris leidžia pasirinkti visus elementus