Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between CSS3's :root pseudo class and html?

I can't seem to find much information about this.

Smashing Magazine seems to be saying that html and :root are the same thing but surely there must be a tiny difference?

like image 508
sanjaypoyzer Avatar asked Apr 09 '13 10:04

sanjaypoyzer


People also ask

What is difference between root and HTML?

The :root selector targets the highest level parent, which would be the <html> tag in an HTML document. The :root has a higher specificity, as it is a pseudo-class instead of a plain element.

Is HTML a root?

The html element itself is "the root element" (which is the term given to the element which is the ancestor of all the other elements in the document), but this would be matched by html { } .

What is the root pseudo selector?

The CSS :root pseudo-class selector is used to select the highest-level parent of a given specification. In the HTML specification, the :root is essentially equivalent to the html selector.

What is the root element of an HTML document?

The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element.


1 Answers

From the W3C wiki:

The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element.

CSS is a general purpose styling language. It can be used with other document types, not only with HTML, it can be used with SVG for example.

From the specification (emphasis mine):

This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).

like image 107
Felix Kling Avatar answered Sep 28 '22 13:09

Felix Kling