CODEWITHSUNDEEP
htmlcssnetbeans
jeroen
jeroen

Reputation: 91744

What is the css / html `root` element?

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?

Upvotes: 38

Views: 33727

Answers (7)

Dave Everitt
Dave Everitt

Reputation: 17876

: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:

Upvotes: 12

Manish Jangir
Manish Jangir

Reputation: 5437

The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.

In the overwhelming majority of cases you’re likely to encounter, :root refers to the <html> element in a webpage. In an HTML document the html element will always be the highest-level parent, so the behaviour of :root is predictable. However, since CSS is a styling language that can be used with other document formats, such as SVG and XML, the :root pseudo-class can refer to different elements in those cases. Regardless of the markup language, :root will always select the document’s top-most element in the document tree.

Upvotes: 1

Jeff Clayton
Jeff Clayton

Reputation: 7291

There is a difference between root and html, the root pseudo-class is a CSS3 entity, and does not affect older browsers (MSIE 8 or less, Opera 9.4 or less)

html /* for all web browsers */
{
    color:red; 
}

You have to put a colon before the word root as follows...

:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
    color:blue;
}

If you used both of these CSS lines, MSIE version 8 or less (or MSIE 9+ when running in compatibility mode, which renders as MSIE 7) would show red text, most other browsers would show blue text.

Documentation and specs for 'root' can be found at the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/:root

Upvotes: 4

Quentin
Quentin

Reputation: 943591

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).

Upvotes: 16

mariamtin
mariamtin

Reputation: 49

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).

Upvotes: 4

peter jones
peter jones

Reputation: 263

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.

Upvotes: 14

David
David

Reputation: 73564

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.

Upvotes: 14

Related Questions