Barnselektor i CSS

Barnselektorn > gör det möjligt att välja element baserat på direkt inbäddning i varandra.

Syntax

selektor1 > selektor2 {
	
}

Exempel

Låt oss rikta in oss på alla b-taggar som finns direkt inuti p-taggar, och färga dem röda:

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

p > b {
	color: red;
}

Exempel

Låt oss rikta in oss på alla b-taggar som finns direkt inuti element med klassen .block, och färga dem röda:

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

Exempel

Låt oss rikta in oss på alla element med klassen .elem som finns direkt inuti element med klassen .block, och färga dem röda:

<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 även

Kontextuell selektor,
som gör det möjligt att välja ett element baserat på dess förälder
Intilliggande syskonselektor,
som gör det möjligt att välja ett element baserat på dess granne
Generell syskonselektor,
som gör det möjligt att välja element efter ett angivet element
Universell selektor,
som gör det möjligt att välja alla element