Selektor dziecka w CSS

Selektor dziecka w CSS wykorzystuje znak > i służy do wskazania elementu, który jest bezpośrednim dzieckiem innego elementu.

Składnia:

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

Przykład:

p > i {
  color: red;
}

Ten zapis oznacza: wybierz każdy element <i>, który znajduje się bezpośrednio wewnątrz elementu <p>.

Przykład działania

<p>Tekst <i>czerwony</i></p>

W tym przypadku tekst w znaczniku <i> będzie czerwony, ponieważ <i> jest bezpośrednim dzieckiem <p>.

<p>Tekst <span><i>nie czerwony</i></span></p>

Tutaj reguła p > i nie zadziała, ponieważ <i> nie jest bezpośrednio w <p>, tylko znajduje się wewnątrz <span>.

Różnica między p > i a p i

• p > i wybiera tylko elementy <i> będące bezpośrednimi dziećmi <p>.
• p i wybiera wszystkie elementy <i> znajdujące się gdziekolwiek wewnątrz <p>, także głębiej zagnieżdżone.

Ważne na egzaminie

Znak > nie oznacza klasy ani alternatywy. Klasa w CSS jest zapisywana z kropką, np. .i, a nie jako samo i.