What is the difference between the pseudo class :root and the * {} in CSS?

Asked

Viewed 139 times

1

Do the two have the same function? Both generally define certain procedures. When I should use one or the other?

html css html5 css3 pseudo-classes
  • 1

    CSS is not my strong suit but I think :root { ... } is more equivalent to html { ... }, that is, to the top element, which is a single element, although it contains all the others. * { ... } defines attributes for all types of elements (p, H1, H2, H3, div, span, etc.)

1 answer

2


No, they don’t have the same function.

Of wiki W3C:

The pseudo-class :root represents an element that is at the root of Document. In HTML, it will always be the HTML element.

Similarly, if you are in an SVG document, the :root will be the SVG element. In short, you can use the :root to select the highest level element of any document.

The selector *, also called universal selector, will select any document element.

See the difference:

:root {
  border: solid 1px blue;
  background-color: rgba(0, 0, 255, 0.3);
}

* {
  border: solid 1px #FF9800;
  background-color: rgba(255, 152, 0, 0.1);
}
<p>
  <span>Olá</span>, <strong>mundo</strong><em>!</em>
</p>

Note that the :root selected only the highest level document element. If you open the developer tools, you will see that it is the element html. The universal selector, on the other hand, selected all page elements.

Reference:

Browser other questions tagged html css html5 css3 pseudo-classes

You are not signed in. Login or sign up in order to post.