What is the css / html `root` element?

html css netbeans

29,480

Solution 1

There is no element called root in HTML. 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 { }.

However, see the :root pseudo-class (with a colon).

Solution 2

From here: http://www.quirksmode.org/css/root.html

The :root pseudo-element selects the root of all blocks in the page, ie. the Initial Containing Block. In HTML this is obviously the <html> element

Test stylesheet:

 :root {    
     background-color: #6374AB;
    padding: 50px; 
 }

If the :root selector works the left and right column of the page are blue, and the white middle column is offset by 50 pixels.

Solution 3

root is a placeholder for any element in the stylesheet template of NetBeans IDE. It is like a dummy variable in calculus. Please put the cursor on y: in the root { display: block; } delete y: and type y. IDE pops up into the instruction window that gives valueable information. They conducts to such a meaning for the root as just a dummy variable. Examples are em {display: inline; } Additionally, root is the point where you begin, the deepest ancestor of the html tree with branches and leaves. So at the beginning you have a box by default and all branches and leaves follow that default unless you change their default display, when they occur, to other values such as, say, inline.

Solution 4

:root can be used to declare CSS variables

in case anyone finds this old question and needs the information, :root is often used in examples to declare CSS Custom Properties or "variables" that become available throughout the document, for example:

:root {
  --darkGreen: #051;
  --myPink: #fce;
}

section {
  color: var(--darkGreen);
  background: var(--myPink);
}

article h3 {
  color: var(--darkGreen);
}

However, any element can be used as the selector for CSS variables (not just :root) so html or body will also enable any element on the page to access them. If anyone has a good reason for using :root, I'd like to know it.

References:

Solution 5

The :root element is the element who has no parents, so I guess that the only root element in HTML is the <html> element.. So when you use the :root selector to style, it will style the whole document.

(I found more information here: http://webdesign.about.com/cs/css/qt/tipcsschild.htm and here: http://www.w3schools.com/cssref/sel_root.asp).

View more solutions

29,480

Author by

jeroen

A Dutch guy who lived a long time in Cusco, Peru since 1998. Via Fuengirola, Spain, I have moved back to Holland where I am now living and working. My activities range from web-site design and development to travelling through Argentina, Chile, Bolivia and Peru as a tour guide. http://www.jeronimodesign.com/ http://careers.stackoverflow.com/jeroen https://bitbucket.org/jeroen_de_bruin

Updated on January 30, 2021

Comments

jeroen over 3 years
I have just recently started using NetBeans IDE (6.9.1) and have used it to add a stylesheet to my site-in-progress.

To my surprise, one element was automatically added:
```
root { 
    display: block;
}
```
Looking around, I could find some information about the :root pseudo-class but nothing about the root element itself.

What is the root element and does it have any use?