Clever Geek Handbook

Is: root really useless?

I know it :root

can be used to select a tag html

for an HTML file and to select a tag svg

for a file svg

(regarding styling XML files this is really weird and not applicable to me), but I see no point in preferring :root

over html

or svg

selectors. Applying the same styles to HTML and SVG seems odd to me using :root

. I'm sure this is an unrealistic scenario.

The only valid application :root

I've found that can be used to override styles html

(since the pseudo-class selector takes precedence over the type selector) but I would avoid frequently overriding html

and referencing CSS files later to avoid this need.

So the question is, is there any real world application :root

where it won't be just an odd alternative html

(or svg

for an SVG file)?

+3


source to share


1 answer


For the vast majority of HTML authors, there are only two practical differences between :root

and html

:

  • :root

    being a pseudo class is more defined. If you require less specificity with a type selector, it is perfectly acceptable to use html

    instead :root

    .
  • :root

    can be used to hide rules from Internet Explorer 8 and older (a use case that may not have been common in 2017, but was fairly common half a century ago).


In addition, the pseudo-class of a class is :root

really intended primarily to be used in the event of a matching root element in an arbitrary document without having to know the element type, which means XML-based languages ​​and even other non-XML document types. Remember, since level 3, the Selectors module has been designed for a wide variety of uses with different document languages, not just styling HTML elements with CSS (which is why it is now simply called "Selectors" rather than "CSS Selectors", despite the fact that it is a CSS module).

In addition, for host languages ​​where the root element does not have its own type (for example, in a language where it element

can be either a root element or a nested element), :root

it is necessary to extract the root element from nested elements (although there are alternatives such as :not(:nth-child(n))

with the same specificity in Selectors 3 or :not(* > *)

with zero specificity in Selectors 4).

+4


source






More articles:


All Articles