Barnevelger i CSS

Barnevelgeren > lar deg velge elementer basert på umiddelbar innkapsling inni hverandre.

Syntaks

velger1 > velger2 {
	
}

Eksempel

La oss rette oss mot alle b-tagger, som er umiddelbart inni p-tagger, og farge dem røde:

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

p > b {
	color: red;
}

Eksempel

La oss rette oss mot alle b-tagger, som er umiddelbart inni elementer med klassen .block, og farge dem røde:

<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;
}

Eksempel

La oss rette oss mot alle elementer med klassen .elem, som er umiddelbart inni elementer med klassen .block, og farge dem røde:

<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;
}

Se også

Kontekstuell velger,
som lar deg velge et element basert på dets forelder
Nabovelger,
som lar deg velge et element basert på dets nabo
Søskenvelger,
som lar deg velge elementer etter en gitt
Universell velger,
som lar deg velge alle elementer