Barnselektor i CSS

Låt oss ha följande kod:

html<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:

cssp 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:

cssp > i {
  color: red;
}

Resultat av kodkörning:

html<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>