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?
One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)
:root {
color: red
}
html {
color: green;
}
<div>hello world</div>
So, in the above example, the :root selector overrides the html selector and the text appears red.
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).
For HTML documents, there is no difference - your root element is the <html> tag, so html{} and :root{} are (besides from a difference in specificity) semantically equivalent.
However, you can apply CSS not only to HTML, but all XML-like documents. That's why :root is there - to target the document's root element regardless of document type. Most people are confused by the difference because the overwhelmingly predominant use case for CSS is styling HTML documents.
Example:
You can style SVG documents with CSS. When styling it, your root element will (obviously;-)) not be html but svg. See the following list of SVG tags.
Another thing to consider is that it's technically possible to replace the root element using javascript:
<html>
<body>
<div id=test>
This will become the root element!
<style>
:root { text-decoration: underline; }
html { color: red; } /* this selector will stop working */
</style>
</div>
<button onclick=document.documentElement.replaceWith(test)>click to replace the root</button>
</body>
</html>
Related
In HTML documents the :root pseudo-class selector introduced in CSS3 is equal to html selector, with the only difference is that :root has a higher specificity.
If they are almost the same, then what are the practical benefits of using :root?
I have read that :root selector is useful for declaring a global CSS variable, i.e. a variable accessible in the whole HTML code. However I can set a variable using html selector, and it will be available in the whole HTML code as well. The only benefit I found on https://alligator.io/css/root-pseudo-class/ is that a CSS variable set in :root can also be used to style SVG graphics. Is it the only benefit?
You pretty-much answered your own question with the last bit about :root matching both <html> and <svg> - or any other root element in non-HTML documents.
Remember that CSS is also designed to be compatible with more than just HTML and SVG, it's also designed to be compatible with XML, and with XML the root element might share the same element-name as a child-element - so this is a way to work with those kinds of documents because CSS offers no other way of selecting only the root element for styling, so it's in the same family as :first-child, :first-of-type, :last-of-type, etc.
I'll add there's also the risk that a malformed HTML document might have an illegal <html> element located elsewhere in the DOM. If you use just html as a selector then those additional <html> elements will also be styled, which would break your site's layout if you have the commonplace html { min-height: 100%; height: 100%; } rule. Changing it to html:root { ... } fixes that.
I just found the :root pseudo class.
The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the element and is identical to the selector html, except that its specificity is higher.
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
What exactly is it used for? Why would anyone ever use it aside from higher specificity when you can just use the html selector?
The answer here is:
except that its specificity is higher.
And why does it matter?
In a normal CSS scenario, if you have something like this:
html {
background-color: red;
}
html {
background-color: blue;
}
You will get the blue background, because it's evaluated last. You can see here.
But, if you have this instead:
:root {
background-color: red;
}
html {
background-color: blue;
}
You'll get the red background. You can see here.
Imagine a scenario where you import several libraries and some of then set some properties on the html that you want to get rid of. You can define your properties as !important, you can organize your imports so what you want is evaluated last or you can use the :root selector.
Others Scenarios
As pointed by #user2864740 and #13ruce1337, CSS is not only applied to HTML, but it can be applied to any kind of XML document, including plain XML, SVG and XUL. The :root pseudo class will select the root of other types of document correctly.
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?
One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)
:root {
color: red
}
html {
color: green;
}
<div>hello world</div>
So, in the above example, the :root selector overrides the html selector and the text appears red.
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).
For HTML documents, there is no difference - your root element is the <html> tag, so html{} and :root{} are (besides from a difference in specificity) semantically equivalent.
However, you can apply CSS not only to HTML, but all XML-like documents. That's why :root is there - to target the document's root element regardless of document type. Most people are confused by the difference because the overwhelmingly predominant use case for CSS is styling HTML documents.
Example:
You can style SVG documents with CSS. When styling it, your root element will (obviously;-)) not be html but svg. See the following list of SVG tags.
Another thing to consider is that it's technically possible to replace the root element using javascript:
<html>
<body>
<div id=test>
This will become the root element!
<style>
:root { text-decoration: underline; }
html { color: red; } /* this selector will stop working */
</style>
</div>
<button onclick=document.documentElement.replaceWith(test)>click to replace the root</button>
</body>
</html>
I overwrite some of the jQuery UI CSS classes in my MVC Views.
I want to move all the style elements to an external style file. But I don't want the overwritten CSS classes to apply to all the views.
Is there a way to specify CSS classes for a particular view, or any recommended way to approach this?
I'd rather keep just one css file if possible.
Assuming that when you say "classes" you mean "rule-sets":
Since you have added a requirement to stick to one CSS file (and I assume you don't want an inline <style> element):
Prefix each selector with an id selector and a descendent combinator: #someid
Then add the id to the body element of the view: <body id="someid">
Thus:
.foo { text-decoration: overline; }
becomes
#myFirstView .foo { text-decoration: overline; }
Warning: This will increase the specificity of each selector (in the group of rule-sets specific to your view). This could change the order in which these rules and the generic "apply to every page" rules are applied. You could avoid this by prefixing all the shared rules with #generic and adding <html id="generic" lang="en">.
You could add an id to the body of the view you wish to override the styles in.
HTML:
<body id="specialview">
...
</body>
CSS:
#specialview .class_override { ... }
My website has a stylesheet defined in the header as style.css with a selector:
.myClass {background:#000;}
Now my div looks like:
<div class="myClass" style="background:#fff;"> </div>
Which one has priority, the inline or the class?
The order of precedence with CSS is as follows:
!important (this is a bit hackish though but it is the only way to override an inline style. Try to avoid using this unless really necessary). Example: p {color: blue !important; }
Inline, such as <p class="redText" style="color: red;">CSS is awesome</p>.In this example, the class is ignored if the redText class declaration has already tried to define the property of color:. Other properties can still be honored though.
Internal styles - those written inside the <head><style> section of an html page.
External stylesheet which defines styles. Your html document must have a link to this sheet in order to use it. Example, again inside the <head> section is: <link rel="stylesheet" type="text/css" href="mystyle.css" />
Check here to brush up on the terminology: http://www.w3schools.com/css/css_syntax.asp
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:
Browser default
Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
Inline style (inside an HTML element)
Source (Edit: of original incorrect information, since corrected both here and there): w3schools
W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)
The order of precedence with CSS is as follows:
Inline, such as <div id="orange" class="green" style="color: red;">This is red</div>.In this example, the class is ignored if the green class declaration has already tried to define the property of color.Also id is also ignored if it has tried to define the color.
Id Selector , such as #orange { color: orange; }
Class Selectors , such as .green { color: green; }
Element Selectors ,such as div { color: black; }
Mozilla Developer Network Documentation Has Well Written Documentation on That Which Says
When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors.
The text color of the below will therefore be red.
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">This is red</div>
Please Consult MDN for any HTML, CSS or JavaScript Knowledge, w3school does not have a very good reputation in developers community. For Further Info On This Matter Please Visit w3fools.
There is no 3.Internal or 4.External precedence. Whichever stylesheet comes last in the html page which will get the precedence.
Eg.
<style></style>
<link> </link> <!-- Precedence -->
<link> </link>
<style></style> <!-- Precedence -->