What determines the order of the CSS "specified" between two elements when loaded from different files?
I'm helping debug a CSS issue where two identical selectors are loaded in a different order between two identically configured servers. One rule is loaded from a stylesheet defined on the page, and the other is loaded by Javascript by inserting a stylesheet file.
According to cascading rules, when I read them, it should descend to the order in which the rules are specified. It looks like the problem is a race condition, but it's not clear what the basis for the race condition is. On the Chrome network tab, the files are listed in the same order between the two servers; however, when you go to an item level on the Items tab, the first rule, priority on that server, is listed.
What determines the order in which CSS is "laid out" between two elements when loaded like this?
source to share
If the selectors are identical, it boils down to order ... order within the CSS and DOM . So the question is, where did you place the dynamically created <link>
(or <style>
) in relation to the original <link>
(or <style>
)? The order in the DOM matters.
If you want your dynamically generated CSS to be evaluated first, add it at the beginning <head>
:
document.head.insertBefore(myLink, document.head.firstChild);
If you want it to be evaluated last, add it to <body>
:
document.body.appendChild(myLink);
Regardless of which rule is evaluated last, one will be applied (use ban !important
)
Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>test</p>
<script>
(function() {
var red = document.createElement("style");
red.textContent = "p { color: red }";
// We'll add this to the top of head. You'll never even notice because it will
// be overridden by the existing green style.
document.head.insertBefore(red, document.head.firstChild);
var blue = document.createElement("style");
blue.textContent = "p { color: blue }";
// We'll add this to the end of the body after a three second delay. It will
// override the other styles.
setTimeout(function() {
document.body.appendChild(blue);
}, 3000);
})();
</script>
</body>
</html>
source to share
First is the power of the selector.
If I use a schema it is: inline > identifier (100) > class (10) > tag (1)
- you can count the "dots" in parentheses to find the strength of the selector.
You know it is possible.
Now that you have two selectors of the same strength applied to the same element, for example.
#main p {color: red}
#top p {color: green}
and HTML
<div id=main>
<div id=top>
<p></p>
</div>
</div>
The paragraph will be green and in the dev tools the punch will be in red. Both selectors have the same strength, recent wins.
Another example:
#main #top p {color: red} /* will be red, stronger selector */
#main p {color: green}
In HTML, the main factor is the order in which the styles associated with the document are specified and the order of the rules (directly in HTML or in CSS). It doesn't matter which CSS file is loaded first (for example, due to file size), the position in the HTML document is important.
source to share