Korzeń :root
W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?
CSS 3
:root { cecha: wartość }Każdy dokument HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu:
html { cecha: wartość }Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia.
Przykład :root
Po wpisaniu w arkuszu stylów::root p { color: red }a w dowolnym miejscu strony:
<p>To jest akapit</p>powinniśmy otrzymać tekst koloru czerwonego:
To jest akapit
Pytania i odpowiedzi :root
Co to jest "root" w CSS?
W CSS termin root odnosi się do głównego elementu struktury dokumentu, czyli do korzenia drzewa dokumentu. Jest to punkt wyjścia dla stylów CSS, które mogą być zastosowane do całej strony.
Jaki znacznik jest elementem głównym "root" strony HTML?
W HTML elementem głównym, który stanowi korzeń drzewa dokumentu, jest znacznik <html>. To wewnątrz tego znacznika umieszczane są wszystkie inne elementy strony.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
:root | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 9.5 2008-06-12 | 1 2003-06-23 |