У цій статті ми з вами дізнаємося, що таке псевдоклас  : 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 ) ;
}

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