Selektor dziecka w CSS
Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Selektor dziecka w CSS zapisuje się za pomocą znaku > i służy do wybierania elementów, które są bezpośrednimi dziećmi innego elementu.
Składnia
rodzic > dziecko {
właściwość: wartość;
}
Przykład:
p > i {
color: blue;
}
Ten zapis oznacza: wybierz każdy element <i>, który znajduje się bezpośrednio wewnątrz elementu <p>, i ustaw jego kolor tekstu na niebieski.
Przykład działania
<p>To jest <i>pochylony tekst</i> w akapicie.</p>
Dla powyższego kodu tekst w elemencie <i> zostanie wyświetlony na niebiesko.
Różnica między > a spacją
Selektor:
p i {
color: blue;
}
wybiera wszystkie elementy <i> znajdujące się gdziekolwiek wewnątrz <p>, nawet głębiej zagnieżdżone.
Natomiast:
p > i {
color: blue;
}
wybiera tylko te <i>, które są bezpośrednimi dziećmi akapitu.
Ważne na egzaminie
W pytaniach egzaminacyjnych zapis p > i należy czytać jako: element i znajdujący się bezpośrednio w elemencie p. Ponieważ element <i> oznacza tekst pochylony, reguła dotyczy pochylonego tekstu akapitu.