A > B
Znak > wybiera elementy B, które są bezpośrednimi dziećmi elementu A, czyli leżą dokładnie jeden poziom niżej.
Przykład
#.menu > li {
margin-bottom: 6px;
font-weight: 700;
color: #fff;
}
.menu ul {
margin: 4px 0 0;
font-weight: 400;
color: #a1a1aa;
}<ul class="menu stage" style="margin: 0; padding: 12px 12px 12px 30px;">
<li>Kursy
<ul>
<li>HTML i CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Dokumentacja</li>
</ul>Definicja i zastosowanie
#Kombinator dziecka > zawęża kombinator potomka do jednego poziomu. Zapis .menu > li wybiera tylko punkty, których rodzicem jest element .menu. Punkty zagnieżdżonego podmenu pominie, bo ich rodzicem jest inna lista.
To dobry wybór, gdy komponenty się zagnieżdżają. Reguła .card > p nie wpłynie na akapity w innej karcie osadzonej w środku, a .grid > * dotknie tylko elementów siatki, a nie ich zawartości.
Sam znak > nic nie waży, specyficzność liczy się tak samo jak przy spacji. Białe znaki wokół niego są dowolne: ul>li i ul > li działają identycznie, choć drugi zapis jest czytelniejszy.
Pamiętaj, że przeglądarka potrafi sama dodać elementy do drzewa. W tabeli zapisanej bez <tbody> wiersze i tak trafią do automatycznie utworzonego <tbody>, więc table > tr nie zadziała, a table > tbody > tr tak.
Składnia
#A > B { właściwość: wartość; }Przykładowe selektory
#- Tylko
spanleżący bezpośrednio w ramce. Wnuk i prawnuk mają innego rodzica. - Każdy
span, którego rodzicem jest.lvl. Taki układ mają zarówno wnuk, jak i prawnuk. - Dwa kombinatory wyznaczają dokładną ścieżkę:
spanw.lvl, które samo leży bezpośrednio w ramce. Pasuje tylko wnuk. - Wszystkie bezpośrednie dzieci ramki bez względu na typ:
spani pierwszydiv.lvlrazem z zawartością.
Przykładowe selektory w praktyce
#.demo > span
span leżący bezpośrednio w ramce. Wnuk i prawnuk mają innego rodzica..demo > span { background: #7c3aed; color: #fff; }.lvl > span
span, którego rodzicem jest .lvl. Taki układ mają zarówno wnuk, jak i prawnuk..lvl > span { background: #7c3aed; color: #fff; }.demo > .lvl > span
span w .lvl, które samo leży bezpośrednio w ramce. Pasuje tylko wnuk..demo > .lvl > span { background: #7c3aed; color: #fff; }.demo > *
span i pierwszy div.lvl razem z zawartością..demo > * { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Używaj
>w komponentach, które mogą się zagnieżdżać, takich jak menu, karty czy listy komentarzy. Styl nie przecieknie do środka. - Para
.kontener > *to wygodny sposób na ostylowanie wszystkich elementów układu flex lub grid bez zaglądania w ich zawartość.
Powiązane hasła
#- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
- A ~ BZnak ~ wybiera wszystkie elementy B, które stoją gdziekolwiek za elementem A i mają z nim wspólnego rodzica.
- *Gwiazdka pasuje do każdego elementu. Służy do resetów stylów i reguł dla wszystkich dzieci wybranego kontenera.
- :first-childPasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
Widzisz błąd albo brakuje przykładu? Napisz do nas.