У цій статті ми з вами дізнаємося, що таке псевдоклас  : root  і розберемося в тому, як можна його використовувати в своїх проектах.

CSS селектор псевдокласу : root  використовується для вибору батьків найвищого рівня. Наприклад в HTML  : root  по суті еквівалентний тегу html.

У наведеному нижче фрагменті CSS стилю  : root  і  html  роблять одне і те ж:

: root {   background-color: gray; } html {   background-color: gray;

Насправді  : root  має більшу "вагу" ніж тег  html . Так виходить, тому що він вважається селектором псевдокласу (наприклад як  : first-child  або  : hover ) і відповідно має більшу специфічність (вагомість) ніж просто селектор тега.

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

Оскільки CSS розроблений також для SVG і XML, ви можете використовувати  : root  і там, тільки він буде відповідати іншому елементу. Наприклад в SVG він буде еквівалентний тегу svg.

Як і в HTML, селектори  : root  і  svg  вибирають один і той же елемент, однак селектор  : root  матиме більш високу специфічність.

Практичне застосування

Як же використовувати  : root  на практиці? Як ми вже говорили раніше - це безпечна заміна для тега  html  і ви можете працювати з  : root  як зі звичайним тегом  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 ) ; }

Джерело перекладу