What is "root:{}" used for?

Question

I often see people use this line in CSS at the beginning of the .css code. Can someone explain what is it used for? I know that is used for defining the style of the highest parent, but i dont know what that means.

Answer 1

As you're already aware:

From this page: CSS-Tricks :root selector

The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree.

This page provides syntax as well: developer.mozilla :root{}

Here's an example you can run:

:root {
  background-color: cornflowerblue;
  padding: 3em;
}

body {
  background-color: white;
  padding: 1.5em;
}

<p>We can take advantage of being able to apply CSS to the <code>&lt;html&gt;</code> element to skip the wrapper <code>div</code> and keep our markup clean!</p>