Child-selektor i CSS

Child-selektoren > giver mulighed for at vælge elementer baseret på direkte indlejring i hinanden.

Syntaks

selektor1 > selektor2 {
	
}

Eksempel

Lad os henvende os til alle b-tags, der er placeret direkte inde i p-tags, og farve dem røde:

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

p > b {
	color: red;
}

Eksempel

Lad os henvende os til alle b-tags, der er placeret direkte inde i elementer med klassen .block, og farve dem røde:

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

Eksempel

Lad os henvende os til alle elementer med klassen .elem, der er placeret direkte inde i elementer med klassen .block, og farve dem røde:

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

Se også

Afstamningselektor,
som giver mulighed for at vælge et element baseret på dets forælder
Nærliggende søskendeselektor,
som giver mulighed for at vælge et element baseret på dets nabo
Generel søskendeselektor,
som giver mulighed for at vælge elementer efter en given
Universel selektor,
som giver mulighed for at vælge alle elementer