Selektor potomka w CSS

Selektor potomka wybiera elementy znajdujące się wewnątrz innych elementów w strukturze HTML. W CSS zapisuje się go przez oddzielenie selektorów spacją.

Składnia

rodzic potomek {
  właściwość: wartość;
}

Przykład:

li span {
  font-size: 10pt;
  color: green;
}

Ten zapis oznacza: wybierz wszystkie elementy span, które znajdują się wewnątrz elementów li. Nie muszą być bezpośrednim dzieckiem li — mogą być zagnieżdżone głębiej.

Przykład HTML

<ul>
  <li>Tekst <span>zielony tekst 10 pt</span></li>
  <li><p><span>też zostanie objęty stylem</span></p></li>
</ul>

<span>ten tekst nie zostanie objęty stylem</span>

Styl li span zadziała tylko na te znaczniki span, które są potomkami elementu li. Ostatni span nie znajduje się w li, więc reguła CSS go nie dotyczy.

Różnica między selektorami

• li span — wybiera każdy span znajdujący się wewnątrz li, także głębiej zagnieżdżony.
• li > span — wybiera tylko span, który jest bezpośrednim dzieckiem li.
• li, span — wybiera wszystkie elementy li oraz wszystkie elementy span.
• span li — wybiera elementy li znajdujące się wewnątrz span.

Ważne na egzaminie

Spacja w selektorze CSS ma znaczenie. Zapis li span nie oznacza „li oraz span”, lecz „span znajdujący się wewnątrz li”.