Barnselektor i CSS
Låt oss ha följande kod:
<p>
text <b><i>fet kursiv</i></b>
</p>
<p>
text <i>bara kursiv</i>
</p>
Låt oss säga att vi vill välja alla taggar i
som är barn av stycken. Låt oss göra det:
p i {
color: red;
}
Resultat av kodkörning:
Låt oss nu välja de taggar i
som är direkta barn
av våra stycken. Barnselektorn > kan hjälpa oss med detta.
För att förstå hur man använder den, låt oss
jämföra den med avkomlingselektorn. Så här:
p i - vi väljer all kursiv text inuti
stycken, och så här: p > i - bara
kursiv text som är direkta barn
till stycken.
Låt oss tillämpa denna selektor på vår HTML-kod:
p > i {
color: red;
}
Resultat av kodkörning:
Följande kod ges:
<ul>
<li>
<i>kursiv</i>
<b>fet</b>
<b><i>fet kursiv</i></b>
</li>
<li>
<i>kursiv</i>
<b>fet</b>
<b><i>fet kursiv</i></b>
</li>
</ul>
Färga endast de taggar b i rött
som är direkta barn
av taggar li.
