A B
Spacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
Przykład
#nav a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
footer a {
color: #a1a1aa;
font-size: 13px;
}<nav class="stage" style="display: flex; gap: 16px;">
<a href="#">Kursy</a>
<a href="#">Dokumentacja</a>
<a href="#">Cennik</a>
</nav>
<footer style="display: flex; gap: 14px; margin-top: 12px;">
<a href="#">Regulamin</a>
<a href="#">Prywatność</a>
</footer>Definicja i zastosowanie
#Kombinator potomka to zwykła spacja między dwoma selektorami. Zapis nav a znaczy: każdy link, który leży wewnątrz nav, bez względu na to, czy jest jego dzieckiem, wnukiem, czy elementem zagnieżdżonym jeszcze głębiej.
Dzięki niemu styl zależy od kontekstu. Ten sam link może wyglądać inaczej w nawigacji (nav a), a inaczej w stopce (footer a), bez dopisywania klas każdemu linkowi. Specyficzność sumuje się ze wszystkich części: nav a ma (0, 0, 2), a .menu a ma (0, 1, 1).
Łatwo przesadzić z długością. Łańcuch .sidebar .menu ul li a jest kruchy: psuje się po każdej zmianie struktury HTML i ma wysoką wagę, którą trudno nadpisać. Zwykle wystarczą dwa poziomy, a resztę załatwi klasa na samym elemencie.
Przeglądarki sprawdzają taki selektor od prawej strony: najpierw znajdują elementy B, potem szukają wśród ich przodków elementu A. Jeśli chcesz wybrać tylko bezpośrednie dzieci, użyj kombinatora >.
Składnia
#A B { właściwość: wartość; }Przykładowe selektory
#- Wszystkie trzy elementy
spanw ramce, na każdej głębokości. Element poza.demozostaje szary. - Każdy
spanwewnątrz dowolnego.lvl, czyli wnuk i prawnuk. Dziecko leży poza nimi. - Tylko
spanw.lvl, które samo leży w innym.lvl. Zostaje sam prawnuk. - Ramka
.demoteż jest elementemdiv, więc pasuje nawet dziecko. Liczy się każdy przodek, nie tylko najbliższy.
Przykładowe selektory w praktyce
#.demo span
span w ramce, na każdej głębokości. Element poza .demo zostaje szary..demo span { background: #7c3aed; color: #fff; }.lvl span
span wewnątrz dowolnego .lvl, czyli wnuk i prawnuk. Dziecko leży poza nimi..lvl span { background: #7c3aed; color: #fff; }.lvl .lvl span
span w .lvl, które samo leży w innym .lvl. Zostaje sam prawnuk..lvl .lvl span { background: #7c3aed; color: #fff; }div span
.demo też jest elementem div, więc pasuje nawet dziecko. Liczy się każdy przodek, nie tylko najbliższy.div span { background: #7c3aed; color: #fff; }Więcej przykładów
#.prose h3 {
margin: 0 0 6px;
color: #c4b5fd;
}
.prose p {
margin: 0 0 8px;
}
.prose code {
padding: 1px 6px;
border-radius: 6px;
background: #27272a;
font-size: 13px;
}<article class="prose stage">
<h3>Czym jest selektor?</h3>
<p>Selektor wskazuje elementy, które mają dostać styl, np. <code>p</code> albo <code>.card</code>.</p>
<p>Ta treść mogłaby pochodzić z Markdowna, więc w środku nie ma żadnych klas.</p>
</article>Klasę ma tylko kontener. Wszystko w środku stylizujesz przez kontekst, bez dopisywania klas do każdego elementu.
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
#- Trzymaj selektory krótkie: najwyżej dwa, trzy poziomy. Dłuższy łańcuch zwykle znaczy, że elementowi przyda się własna klasa.
- Kombinator potomka świetnie sprawdza się przy treści, której nie kontrolujesz, na przykład artykułach z Markdowna:
.prose a,.prose ul. - Gdy styl ma dotyczyć tylko pierwszego poziomu zagnieżdżenia, na przykład w menu z podmenu, zamień spację na
>.
Powiązane hasła
#- A > BZnak > wybiera elementy B, które są bezpośrednimi dziećmi elementu A, czyli leżą dokładnie jeden poziom niżej.
- 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.
- &Pozwala pisać reguły wewnątrz innych reguł, jak w Sass. Znak & oznacza w nich selektor reguły nadrzędnej.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- .klasaWybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
Widzisz błąd albo brakuje przykładu? Napisz do nas.