Кратко
Секция статьи "Кратко"Псевдокласс
нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег <html>
. Часто
используется для того, чтобы задавать кастомные свойства.
Пример
Секция статьи "Пример"Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:
:root { font-family: 'Oswald', sans-serif; --button-size: 40px; --main-color: #bada55;}
:root { font-family: 'Oswald', sans-serif; --button-size: 40px; --main-color: #bada55; }
Как пишется
Секция статьи "Как пишется"Пишется, как обычный псевдокласс: после двоеточия пишем слово root. Однако в отличие от других псевдоклассов
полностью самостоятельный, его не используют в связке с другими селекторами.
Как это понять
Секция статьи "Как это понять"Корневой элемент — это самая главная обёртка в документе, самый первый родитель. В HTML-документах псевдокласс
будет ссылаться на тег <html>
. Поскольку CSS работает ещё и в SVG-, и XML-файлах, для них корневой элемент будет другим. В SVG-документах родителем будет тег <svg>
, а в XML-документах — тег <xml>
.
На практике
Секция статьи "На практике"🛠 Поскольку
— это псевдокласс, его специфичность будет выше, чем селекторов по тегу html
или svg
.
В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.
:root { background-color: peachpuff;}html { background-color: tomato;}
:root { background-color: peachpuff; } html { background-color: tomato; }