Selektor potomka w CSS

Selektor potomka w CSS

Selektor potomka wybiera elementy znajdujące się wewnątrz innych elementów, niezależnie od tego, jak głęboko są zagnieżdżone. W CSS zapisuje się go przez oddzielenie selektorów spacją.

Składnia

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

Przykład:

h1 i {
  color: red;
}

Ten zapis oznacza: ustaw kolor czerwony dla każdego elementu i, który znajduje się wewnątrz elementu h1.

Co zostanie ostylowane?

Dla kodu HTML:

<h1>Nagłówek <i>pochylony</i></h1>
<p>Akapit <i>pochylony</i></p>

Reguła:

h1 i {
  color: red;
}

zadziała tylko na tekst w znaczniku i znajdującym się w h1. Element i w akapicie p nie zostanie objęty tą regułą.

Ważne rozróżnienie

Selektor:

h1 i

nie oznacza „elementów h1 oraz elementów i”. Oznacza „elementy i będące potomkami h1”.

Aby wybrać jednocześnie wszystkie h1 i wszystkie i, trzeba użyć przecinka:

h1, i {
  color: red;
}

Typowy błąd egzaminacyjny

Spacja między selektorami ma znaczenie. h1 i to selektor potomka, natomiast h1, i to lista selektorów. W pytaniach egzaminacyjnych poprawna interpretacja spacji i przecinka często decyduje o właściwej odpowiedzi.