higher specificity CSS selectors code example

Example: css specificity

assuming equal specificity (specificity.keegan.st/): 
               ...styles declared later win...
order yields precedence within sheets and among sheets
<head>
<link rel="stylesheet" href="goodLuck.css">
<style "critical CSS" arrives at the browser first but gets trampled on first
<link rel="stylesheet" href="better.css">
loadCSS injects best.css at the bottom of the <head> BY DEFAULT but
loads just before the script element containing this code
<script id="loadcss">loadCSS("best.css", document.getElementById("loadcss"));</script>
</head><body> 
<style> @import "invalid.css"; </style>
<link rel="stylesheet" href="invalidWinner.css">
</body>

scss:
%variation { background: orange;}
.module {  background: #ccc;}
.module-variation { @extend %variation; } //this moves up to % so orange wins

Tags:

Css Example

Recent Posts