Search code examples
htmlcsscss-selectorspseudo-class

Is :root really useless?

I know that :root can be used to select html tag for HTML file and to select svg tag for svg file (regarding styling XML files this is something really strange and not applicable for me), but I don't see sense to prefer :root over html or svg selectors. Applying the same styles for HTML and SVG seem really odd for me using :root. I am sure that this is not realistic scenario.

The only valid application of :root I found that it can be used to override html styles (because pseudoclass selector has more priority than type selector), but I would avoid often overriding of html and place specific CSS file links later in order to avoid this need.

So the question: are there any real world application of :root where it wouldn't be just an odd alternative to html (or svg for SVG file)?

Solution

  • For the vast majority of authors working with HTML, there are only two practical differences between :root and html:

    1. :root, being a pseudo-class, is more specific. If you require the lesser specificity of a type selector, it's entirely acceptable to use html instead of :root.
    2. :root can be used to hide rules from Internet Explorer 8 and older (a use case that perhaps isn't prevalent in 2017 but was fairly common half a decade ago).

    Other than that, the :root pseudo-class is indeed designed primarily for the use case of matching the root element in an arbitrary document without having to know the type of element, which means XML-based languages and even other, non-XML-based types of documents. Remember that as of level 3, the Selectors module is designed for a variety of uses with a variety of document languages, and not just styling HTML elements with CSS (which is why it's now simply called "Selectors" and not "CSS Selectors", despite it being a CSS module).

    Additionally, for host languages where the root element doesn't have its own type (e.g. in a language where element may be both the root element, and nested), :root is necessary for distinguishing the root element from nested elements (though alternatives exist, like :not(:nth-child(n)) with equal specificity in Selectors 3, or :not(* > *) with zero specificity in Selectors 4).