От автора: селектор псевдо-класса CSS :root используется для выбора родителя самого высокого уровня данной спецификации. В спецификации HTML, :root по сути, эквивалентен селектору html.
В сниппете CSS ниже стили :root и html будут делать то же самое:
|
1 2 3 4 5 6 7 |
:root { background-color: gray; } html { background-color: gray; } |
Если вы заметили, я сказал, что :root по сути эквивалентно селектору html. На самом деле, селектор :root имеет больше полномочий, чем html. Это потому, что он на самом деле считается селектором псевдо-класса (как, например, :first-child или :hover).
Как селектор псевдо-класса, он обладает большей специфичностью, чем селекторы тегов:
|
1 2 3 4 5 6 7 8 9 |
:root { background-color: blue; color: white; } html { background-color: red; color: white; } |
Несмотря на то, что селектор html следует за ним, :root все равно является приоритетным, благодаря более высокой специфичности!
Пересечение спецификаций
В спецификации HTML псевдо-класс :root указывает на родителя самого высокого уровня: html. Поскольку CSS также разработан для SVG и XML, вы можете использовать :root для них, и он будет просто соответствовать другому элементу. Например, в SVG родительским элементом высшего уровня является тег svg.
|
1 2 3 4 5 6 7 |
:root { fill: gold; } svg { fill: gold; } |
Подобно HTML, :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.
Практическое использование
Для чего практически применяется :root? Как мы уже было сказано, это безопасная замена для селектора html. Это означает, что вы можете делать все, что обычно делаете с селектором html:
|
1 2 3 4 5 6 7 |
:root { margin: 0; padding: 0; color: #0000FF; font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; } |
Если хотите, вы можете изменить этот код, чтобы использовать Пользовательские свойства CSS для создания переменных на глобальном уровне!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
:root { margin: 0; padding: 0; --primary-color: #0000FF; --body-fonts: "Helvetica", "Arial", sans-serif; --line-height: 1.5; } p { color: var(--primary-color); font-family: var(--body-fonts); line-height: var(--line-height); } |
Дополнительным преимуществом использования :root вместо html заключается в том, что вы можете стилизовать SVG-графику!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
:root { margin: 0; padding: 0; --primary-color: #0000FF; --body-fonts: "Helvetica", "Arial", sans-serif; --line-height: 1.5; } svg { font-family: var(--body-fonts); } svg circle { fill: var(--primary-color); } |
Подробную документацию по селектору псевдо-класса :root можно найти на Mozilla Developer Network.
Автор: William Le
Источник: //alligator.io
Редакция: Команда webformyself.
