vancake
vancake
Programming language:CSS
2021-06-03 12:49:15
0
Q:

css specificity

PixelSnader
PixelSnader
Code: CSS
2021-02-13 19:22:44 

/* CSS Hierarchy: You can apply a global CSS rule and, using internal or 
inline CSS, cause particular changes to each html page */

/* Highest priority to lowest priority: */

/* 1º - Inline CSS */
<body style="background-color: green;">
...
</body>


/* 2º - Internal CSS */
<head>
	<style>
		body {
      		background-color: blue;
		}
	</style>
</head>


/* 3º - External CSS with id or class selectors */

.name_of_class {
  color: #5c8d89;
}

#name_of_id {
  font-size: 30px;
}


/* 4º - External CSS with tag selectors */
body {
  background-color: red;
}

h1 {
  color: #74b49b;
}
1
Max
Max
Code: CSS
2021-05-01 08:48:53 
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
0

Tags

Related

New to Communities?

Join the community