Selektor dziecka w CSS wykorzystuje znak > i wybiera element, 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: ustaw kolor czerwony dla elementów <i>, które znajdują się bezpośrednio wewnątrz elementu <p>.
Przykład działania
<p>To jest <i>czerwony tekst</i>.</p>
W tym przypadku tekst w <i> zostanie pokolorowany na czerwono, ponieważ <i> jest bezpośrednim dzieckiem <p>.
Przykład, który nie zadziała
<p>To jest <span><i>tekst</i></span>.</p>
Tutaj element <i> nie jest bezpośrednio w <p>, lecz znajduje się wewnątrz <span>. Bezpośrednim dzieckiem <p> jest <span>, a nie <i>, więc selektor p > i nie zadziała.
Różnica między p > i a p i
p > i { color: red; }
Wybiera tylko <i> bezpośrednio w <p>.
p i { color: red; }
Wybiera każdy element <i> znajdujący się gdziekolwiek wewnątrz <p>, także głębiej zagnieżdżony.
Ważne na egzaminie
Znak > w selektorze CSS oznacza relację rodzic → bezpośrednie dziecko. Nie oznacza klasy, alternatywy ani wykluczenia elementów.