:root
Pasuje do elementu głównego dokumentu, w HTML do znacznika html. Zwyczajowe miejsce na zmienne CSS całej strony.
Przykład
#:root {
--brand: #7c3aed;
--surface: #18181b;
--radius: 12px;
}
.card {
padding: 14px;
border-left: 4px solid var(--brand);
border-radius: var(--radius);
background: var(--surface);
}<div class="card">
<strong>Moduł 3: pseudoklasy</strong>
<p style="margin: 4px 0 0; color: #a1a1aa;">Kolor paska, tło i zaokrąglenie pochodzą ze zmiennych zapisanych na :root.</p>
</div>Definicja i zastosowanie
#Pseudoklasa :root wybiera korzeń drzewa dokumentu. Na stronie HTML to zawsze element <html>, więc :root i html wskazują ten sam element. Różnią się wagą: :root jako pseudoklasa ma specyficzność (0, 1, 0), a html jako selektor typu tylko (0, 0, 1).
Najczęściej trzyma się tu zmienne CSS (właściwości niestandardowe) dla całej strony: kolory marki, odstępy, promienie zaokrągleń. Zmienne dziedziczą się w dół drzewa, więc zapisane na :root są dostępne w każdym elemencie przez var(--nazwa).
W :root ustawia się też rzeczy, które dotyczą całego dokumentu: color-scheme, bazowy font-size, od którego liczone są jednostki rem, czy scroll-behavior. Motyw ciemny albo jasny zmienisz, nadpisując zmienne w jednym miejscu, np. w @media (prefers-color-scheme: light) albo w regule :root[data-theme="light"].
Składnia
#:root { --nazwa: wartość; }Typowe zastosowania
#- Jedna zmienna koloru zmienia naraz przycisk i znaczek.
- Promień zaokrągleń wszystkich elementów ustawiony w jednym miejscu.
- Kilka zmiennych naraz to gotowy motyw. Komponenty się nie zmieniają, zmieniają się tylko wartości.
- Bazowy rozmiar czcionki dokumentu. Tekst podany w
remrośnie razem z nim.
Typowe zastosowania w praktyce
#--brand
:root { --brand: #7c3aed; }--radius
:root { --radius: 999px; }--brand i --radius
:root { --brand: #10b981; --radius: 12px; }font-size
rem rośnie razem z nim.:root { font-size: 20px; }Więcej przykładów
#:root {
--bg: #18181b;
--fg: #e5e5e5;
}
:root[data-theme="light"] {
--bg: #f4f4f5;
--fg: #18181b;
}
.panel {
background: var(--bg);
color: var(--fg);
}<div class="panel" style="padding: 14px; border-radius: 12px; transition: background-color 0.2s, color 0.2s;">
<p style="margin: 0 0 10px;">Kolory tego panelu pochodzą ze zmiennych.</p>
<button type="button" onclick="const r = document.documentElement; r.dataset.theme = r.dataset.theme === 'light' ? 'dark' : 'light'" style="padding: 6px 12px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer;">Zmień motyw</button>
</div>Kliknij przycisk. Skrypt zmienia tylko atrybut data-theme na elemencie <html>, a kolory podmieniają się przez zmienne.
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
#- Nazywaj zmienne od roli, a nie od wartości:
--color-accentzamiast--purple. Zmiana motywu nie będzie wtedy wymagała zmiany nazw. - Zmienne na
:rootsą globalne. Wartości potrzebne tylko w jednym komponencie definiuj na tym komponencie, np..card { --gap: 12px; }. - Pamiętaj, że
:rootważy więcej niżhtml. Regułahtml { … }nie nadpisze właściwości ustawionej w:root, nawet jeśli stoi niżej.
Powiązane hasła
#- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- Selektor typuWybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- font-sizeUstawia rozmiar czcionki.
- var()Wstawia wartość zmiennej CSS, czyli właściwości niestandardowej zapisanej jako --nazwa. Pozwala też podać wartość zapasową.
Widzisz błąd albo brakuje przykładu? Napisz do nas.