Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >Zagnieżdżanie (&)

Zagnieżdżanie (&)

.rodzic { … &:hover { … } .dziecko { … } @media (…) { … } }

Reguły można pisać wewnątrz innych reguł, jak dawniej potrafiły tylko Sass czy Less. Zagnieżdżony selektor odnosi się do zewnętrznego; znak & zastępuje zewnętrzny selektor tam, gdzie potrzebujesz go jawnie – przy stanach (&:hover), selektorach złożonych (&.active) lub na końcu (.dark &).

Wartości

  • .dziecko { } – to samo co .rodzic .dziecko.
  • &:hover, &.active – bez spacji: ten sam element ze stanem lub klasą.
  • > li, + p – kombinator na początku: .rodzic > li.
  • .dark & – & na końcu: .dark .rodzic.
  • @media, @supports, @container, @layer – zagnieżdżać można też @-reguły; deklaracje w nich dotyczą zewnętrznego selektora.

Przykłady

Cały komponent w jednym bloku:

.card {
  padding: 12px;
  border: 1px solid #ddd;
  & h3 {
    margin: 0 0 6px;
    color: #01579b;
  }
  &:hover { border-color: #0088d1; }
  &.highlighted { background: #fff3e0; }
  @media (min-width: 700px) {
    padding: 20px;
  }
}

Odpowiada to regułom .card, .card h3, .card:hover, .card.highlighted i @media (min-width: 700px) { .card { padding: 20px } }.

Na co uważać

  • CSS nie potrafi składać nazw jak Sass (&__title dla .card__title) – & zastępuje cały selektor, a nie kawałek tekstu.
  • Zewnętrzna lista selektorów zachowuje się jak :is(): w .a, #b { .c { } } selektor .c ma specyficzność 1-1-0 także wewnątrz .a.
  • Pełna obsługa: Chrome od 120, Firefox od 117, Safari od 17.2. Chrome 112–119 i Safari 16.5–17.1 nie znały zagnieżdżonego selektora zaczynającego się od nazwy elementu (h3 { }); forma & h3 działa wszędzie. Starsze przeglądarki odrzucają zagnieżdżone reguły – strona musi działać bez nich.
  • Głębokie zagnieżdżanie wiąże CSS ze strukturą HTML i podnosi specyficzność tak samo jak długie selektory. Zwykle wystarczą dwa lub trzy poziomy.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od grudnia 2023, za szeroko dostępne uznawane od czerwca 2026. Od wersji: Chrome 112 (w pełni od 120), Firefox 117, Safari 16.5 (w pełni od 17.2). Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
:is()
Specyficzność i kaskada
@media
Kombinator potomka (spacja)
@scope