От автора: селектор псевдо-класса CSS :root используется для выбора родителя самого высокого уровня данной спецификации. В спецификации HTML, :root по сути, эквивалентен селектору html.
В сниппете CSS ниже стили :root и html будут делать то же самое:
:root { background-color: gray;
} html { background-color: gray;
}Если вы заметили, я сказал, что :root по сути эквивалентно селектору html. На самом деле, селектор :root имеет больше полномочий, чем html. Это потому, что он на самом деле считается селектором псевдо-класса (как, например, :first-child или :hover).
Как селектор псевдо-класса, он обладает большей специфичностью, чем селекторы тегов:
:root { background-color: blue; color: white;
} html { background-color: red; color: white;
}Несмотря на то, что селектор html следует за ним, :root все равно является приоритетным, благодаря более высокой специфичности!
Пересечение спецификаций
В спецификации HTML псевдо-класс :root указывает на родителя самого высокого уровня: html. Поскольку CSS также разработан для SVG и XML, вы можете использовать :root для них, и он будет просто соответствовать другому элементу. Например, в SVG родительским элементом высшего уровня является тег svg.
:root { fill: gold;
} svg { fill: gold;
}Подобно HTML, :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.
Практическое использование
Для чего практически применяется :root? Как мы уже было сказано, это безопасная замена для селектора html. Это означает, что вы можете делать все, что обычно делаете с селектором html:
:root { margin: 0; padding: 0; color: #0000FF; font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5;
}Если хотите, вы можете изменить этот код, чтобы использовать Пользовательские свойства CSS для создания переменных на глобальном уровне!
: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-графику!
: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
Источник: https://alligator.io
Редакция: Команда webformyself.