Использование псевдокласса в CSS: что это и как применять на практике

в CSS:root Псевдокласс `:root соответствует селектору html, но имеет более высокую специфичность, что делает его предпочтительным в ряде случаев.

Что такое псевдокласс :root и почему он важен?

и:rootВ HTML-документе селекторы html могут казаться взаимозаменяемыми, и на первый взгляд они действительно выполняют одинаковую функцию:

:root {
background-color: gray;
}

html {
background-color: gray;
}

Однако, :root имеет более высокий вес в иерархии CSS благодаря тому, что он является псевдоклассом. Это значит, что в случае конфликта стилей, :root одерживает победу над селектором html, даже если html располагается ниже по коду.

Пример:

:root {
background-color: blue;
color: white;
}

html {
background-color: red;
color: white;
}

Несмотря на то, что html идёт последним, стили, определённые для :root, будут применяться, потому что :root обладает большей специфичностью.

Специфика использования :root в различных спецификациях

Селектор :root используется не только в HTML, но и в других документах, таких как SVG и XML. В этих случаях :root будет относиться к родителю высшего порядка

Например, в SVG это будет тег svg:

:root {
fill: gold;
}

svg {
fill: gold;
}

Здесь, как и в HTML, стили для :root и svg выполняют одинаковые действия, но :root будет иметь более высокую специфичность.

Практическое применение :root

можно:rootКак уже упоминалось, на практике. :rootТеперь давайте рассмотрим, как можно использовать html, задавая базовые стили для всего документа:

:root {
margin: 0;
padding: 0;
color: #0000FF;
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
}

Но :root особенно полезен при создании глобальных переменных в вашем 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 является возможность стилизовать 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, используются для стилизации как текстовых элементов, так и графических объектов в SVG.

Заключение

Псевдокласс :root является мощным инструментом в арсенале веб-разработчика, позволяющим управлять глобальными стилями и создавать переменные, которые могут быть использованы в различных частях проекта. Его высокая специфичность делает его предпочтительным выбором при конфликте стилей, что позволяет более гибко и удобно управлять внешним видом ваших веб-страниц.

Для получения более подробной информации о :root и его возможностях, посетите сайт MDN.