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?
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).
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>elementTest 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.
root element that NetBeans inserted, not the pseudo-element.
root element they are outputting simply does not exist. How is it not a bug for a template to generate code that is invalid / non-sensical?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.
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.
:root psuedo-element has a higher specificity than the html element, therefore, it is preferable to set the CSS variables inside :root i.e. globally and above the html element—this is done for general hygiene over the cascade. Otherwise, yes, both html and body elements will pass on the variables down the tree as well as you have rightly pointed out.html overrule the ones set on :root?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).
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
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.
