&
Pozwala pisać reguły wewnątrz innych reguł, jak w Sass. Znak & oznacza w nich selektor reguły nadrzędnej.
Przykład
#.btn {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #7c3aed;
color: #fff;
&:hover {
background: #6d28d9;
}
&.ghost {
background: transparent;
outline: 1px solid #7c3aed;
}
.icon {
margin-right: 6px;
}
}<style>button { font: inherit; cursor: pointer; }</style>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button"><span class="icon">▶</span>Start</button>
<button class="btn ghost" type="button">Anuluj</button>
</div>Definicja i zastosowanie
#Natywne zagnieżdżanie CSS pozwala umieścić jedną regułę w środku drugiej. Zagnieżdżona reguła dotyczy elementów wewnątrz rodzica, więc .card { p { … } } działa jak .card p { … }. Kod komponentu trzymasz w jednym bloku i nie powtarzasz wielokrotnie nazwy klasy.
Znak & oznacza selektor reguły nadrzędnej. Jest potrzebny, gdy selektor ma przykleić się do rodzica bez spacji: &:hover to najechanie na sam element, &.active to element z dodatkową klasą, a &::before jego pseudoelement. Bez & przeglądarka potraktuje zagnieżdżony selektor jak potomka. & może też stać na końcu: .dark & { … } zmienia styl elementu, gdy leży wewnątrz .dark.
W środku reguły możesz umieszczać także @media i @supports, a zapisane w nich deklaracje trafiają wprost do bieżącego selektora. To wygodne przy stylach responsywnych: wszystko, co dotyczy przycisku, jest w jednym miejscu.
Od Sass różni się w szczegółach. Przeglądarka nie skleja fragmentów nazw, więc &__title nie zbuduje klasy .card__title. Selektor & działa też jak :is(): gdy rodzicem jest lista #logo, .brand, zagnieżdżona reguła dostaje wagę najmocniejszego selektora z tej listy.
Składnia
#rodzic {
właściwość: wartość;
potomek { … }
&:hover { … }
&.klasa { … }
.kontekst & { … }
}Warianty zapisu
#bez &
Zagnieżdżony selektor bez&oznacza potomka, tak jak.demo span. Etykiety we wszystkich kartach zmieniają kolor.- Najedź kursorem na dowolną kartę.
&dokleja pseudoklasę do samej karty, bez spacji. - Karta, która ma dodatkowo klasę
active. Samo.activew środku reguły szukałoby potomka z tą klasą. &na końcu odwraca kierunek: karta dostaje styl, gdy leży wewnątrz.promo.- Reguła
@mediaw środku bloku dotyczy od razu.demo. Podgląd ma ponad 300 px szerokości, więc karty są niebieskie.
Warianty zapisu w praktyce
#span
& oznacza potomka, tak jak .demo span. Etykiety we wszystkich kartach zmieniają kolor..demo {
span { color: #fbbf24; }
}&:hover
& dokleja pseudoklasę do samej karty, bez spacji..demo {
&:hover { background: #7c3aed; }
}&.active
active. Samo .active w środku reguły szukałoby potomka z tą klasą..demo {
&.active { background: #7c3aed; }
}.promo &
& na końcu odwraca kierunek: karta dostaje styl, gdy leży wewnątrz .promo..demo {
.promo & { background: #7c3aed; }
}@media (min-width: 300px)
@media w środku bloku dotyczy od razu .demo. Podgląd ma ponad 300 px szerokości, więc karty są niebieskie..demo {
@media (min-width: 300px) {
background: #0284c7;
}
}Więcej przykładów
#.grid {
display: grid;
gap: 8px;
@media (min-width: 560px) {
grid-template-columns: repeat(3, 1fr);
}
}<div class="grid">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
</div>Na szerokim ekranie elementy stoją w trzech kolumnach, na telefonie jeden pod drugim. Całe zachowanie siatki mieści się w jednym bloku.
Obsługa przeglądarek
#Szeroko dostępne · od 2023 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie zagnieżdżaj głębiej niż na dwa, trzy poziomy. Każdy poziom to dłuższy selektor i wyższa specyficzność, dokładnie jak przy ręcznie pisanym łańcuchu.
- Pseudoklasy i pseudoelementy zawsze zapisuj z
&:&:hover,&::after. Samo:hoverw środku reguły znaczy „dowolny potomek pod kursorem”. - Jeśli strona musi działać w przeglądarkach sprzed końca 2023 roku, zostań przy preprocesorze (Sass, PostCSS), który zamieni zagnieżdżenia na zwykły CSS.
Powiązane hasła
#- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- :is()Dopasowuje element do dowolnego selektora z listy. Skraca długie, powtarzalne selektory do jednego zapisu.
- 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.