В :rootселектора ви позволява да се насочи към "родител" елемент най-високо ниво в DOM, или документ дървото. Той е дефиниран в спецификациите на CSS Selectors Level 3 като „структурен псевдоклас“, което означава, че се използва за стилизиране на съдържание въз основа на връзката му с родителско и братско съдържание.
В преобладаващото мнозинство от случаите, които вероятно ще срещнете, се :rootотнася до елемента в уеб страница. В HTML документ htmlелементът винаги ще бъде родител от най-високо ниво, така че поведението на :rootе предсказуемо. Тъй като обаче CSS е език за стилизиране, който може да се използва с други формати на документи, като SVG и XML, :rootпсевдокласът може да се позовава на различни елементи в тези случаи. Независимо от езика за маркиране, :rootвинаги ще изберете най-горния елемент на документа в дървото на документа.
В примера по-долу :rootпсевдокласният селектор се използва за създаване на цвят на фона зад елемента. В този случай същият ефект може да бъде постигнат чрез използване на htmlселектора на елементи в нашия CSS вместо това.
Точки на интерес
- Въпреки че и
:rootселекторът, иhtmlселекторът са насочени към едни и същи HTML елементи, може да е полезно да се знае, че:rootвсъщност има по-висока специфичност. Селекторите на псевдокласа (но не и псевдоелементите) имат специфичност, равна на тази на клас, която е по-висока от селектора на основен елемент.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| да | да | да | 9,5+ | IE9 + | да | да |