It is not very clear to me when to use one selector or another or if they really have a clear difference, do I use them as I see fit? Or according to some specific use.
It is not very clear to me when to use one selector or another or if they really have a clear difference, do I use them as I see fit? Or according to some specific use.
According to specification 1
The pseudoclass
root
represents the root of a document, within an HTML document it represents the tag<html></html>
Example 1
You can see how with that pseudo-class without explicitly targeting the HTML tag, the background color was applied to the entire document; that is, I look for the highest level element
Example 2
Observe how, based on the issue of specificity, in the following snnipet, although the red color of the html tag should be applied by cascading, the tomato color of the pseudo-class is ignored and kept
:root
because it has a higher level of specificityYou can check the above in the following image, where you can see how the browser cancels the style of the label
html
and only maintains theroot
previously exposed one.The issue of specificity is mentioned, because it is the method by which the browser determines which styles have greater weight or application relevance over others; that is, as we can read in the Mozilla Developer 2 doc ; the order is like this:
So, as you can see, it is more specific to use the pseudoclass
:root
in this case than the label<html>
itself .References
:root
:root
is a pseudo class that refers to the root of a page, while the selectorhtml
refers to the html tag of a page, this tag is the base tag of a page so we can say that they refer to the same thing but they have differences of "specificity", in other words, have different "weight" when selecting which style definition I stick to when using one or the other, examples below:Usually when we assign css styles, the interpreter sticks with the last style we defined. For example, we have two div objects whose styles are changed in two places, but the interpreter keeps the last definition
this however is not the same for selectors
:root
andhtml
since it:root
has more "weight", it cannot be overridden by the selectorhtml
No matter the order...
Hi, I'll tell you that :root and html mean the same thing. But you have a "different specificity", :root "has higher specificity value", so be aware if we select elements from the DOM.