:rootSelektor pozwala kierować najwyższym poziomie „rodzic” element DOM lub drzewa dokumentu. Jest zdefiniowana w specyfikacji CSS Selectors Level 3 jako „strukturalna pseudoklasa”, co oznacza, że jest używana do stylizowania treści na podstawie jej relacji z treścią nadrzędną i siostrzaną.
W przeważającej większości przypadków, które możesz napotkać, :rootodnosi się do elementu strony internetowej. W dokumencie HTML htmlelement zawsze będzie elementem nadrzędnym najwyższego poziomu, więc zachowanie :rootjest przewidywalne. Ponieważ jednak CSS jest językiem stylów, którego można używać z innymi formatami dokumentów, takimi jak SVG i XML, :rootpseudoklasa może w takich przypadkach odwoływać się do różnych elementów. Niezależnie od języka znaczników, :rootzawsze wybierze najwyższy element dokumentu w drzewie dokumentu.
W poniższym przykładzie :rootselektor pseudoklasy służy do tworzenia koloru tła za elementem. W tym przypadku ten sam efekt można by osiągnąć, używając htmlzamiast tego selektora elementów w naszym CSS.
Użyteczne miejsca
- Chociaż
:rootselektor ihtmlselektor są skierowane na te same elementy HTML, warto wiedzieć, że w:rootrzeczywistości ma wyższą specyficzność. Selektory pseudoklas (ale nie pseudoelementy) mają specyficzność równą klasie, która jest wyższa niż selektor elementu podstawowego.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| tak | tak | tak | 9.5+ | IE9 + | tak | tak |