Specificity Hierarchy
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
| Selector | Example | Description | Weight |
|---|---|---|---|
| Inline styles | <h1 style="color: pink;"> | Highest priority, will override all other selectors | |
| Id selectors | #navbar | Second highest priority | 1-0-0 |
| Classes, attribute selectors and pseudo-classes | .test, [type="text"], :hover | Third highest priority | 0-1-0 |
| Elements and pseudo-elements | h1, ::before, ::after | Low priority | 0-0-1 |
| Universal selector and :where() | *, where() | No priority | 0-0-0 |
Understand the Weight Notation
The weight notation uses three numbers (X-Y-Z):
- X - Number of ID selectors
- Y - Number of class selectors, attribute selectors, and pseudo-classes
- Z - Number of element selectors and pseudo-elements
The selector with the higher leftmost number wins. If equal, compare the next number, and so on.
Calculate the Specificity Weight
The declaration with the highest specificity/weight value will be applied to the element.
Example
Example Code
htmlMore Specificity Examples
Understand how specificity works in different scenarios:
Equal specificity: the latest rule wins
If the same rule is written twice in the external style sheet, the latest rule wins:
Example
Example Code
cssh1 {background-color: yellow;}
h1 {background-color: red;}ID selectors beat attribute selectors
Look at the following code lines - Here, the first rule has higher specificity than the second, and will therefore be applied:
Example
Example Code
css#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}A class selector beats element selectors
A class selector such as .intro beats h1, p, div, etc:
Example
Example Code
css.intro {background-color: yellow;}
h1 {background-color:
red;}The universal selector (*)
The universal selector (*) has no specificity weight value:
Example
Example Code
css* {background-color: yellow;}
h1 {background-color: red;}Inline style vs external style sheet
The embedded style sheet is closer to the element to be styled. So in the following situation the last rule will be applied:
Example
Example Code
cssInteractive Code Examples
CSS Example 1
htmlCSS Example 2
cssCSS Example 3
cssCSS Example 4
cssCSS Example 5
cssCSS Example 6
css/*From external CSS file:*/
#content h1 {background-color: red;}
/*In HTML file:*/
<style>
#content h1 {background-color:
yellow;}
</style>