Page 87 - CSS
P. 87
What color will the text be? (hover to see the answer)
blue
First the specificity rules are applied, and the one with the highest specificity "wins".
Example 2 - Cascade rules with identical selectors
External css file
.class {
background: #FFF;
}
Internal css (in HTML file)
<style>
.class {
background: #000;
}
<style>
In this case, where you have identical selectors, the cascade kicks in, and determines that the last
one loaded "wins".
Example 3 - Cascade rules after Specificity rules
body > .mystyle { background-color: blue; } /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; } /* specificity: 0, 0, 1, 1 */
<body class="otherstyle">
<div class="mystyle">Hello World</div>
</body>
What color will the background be?
red
After applying the specificity rules, there's still a conflict between blue and red, so the cascading
rules are applied on top of the specificity rules. Cascading looks at the load order of the rules,
whether inside the same .css file or in the collection of style sources. The last one loaded
overrides any earlier ones. In this case, the .otherstyle > div rule "wins".
A final note
• Selector specificity always take precedence.
• Stylesheet order break ties.
• Inline styles trump everything.
https://riptutorial.com/ 65
