When multiple CSS rules target the same element, the selector with the highest specificity value will “win”, and its style declaration is applied to the HTML element.
Consider specificity as a scoring system that determines which style declaration ultimately applies to an element.
Review the following examples:
Example 1
In this example, the “p” element is selected, and a red color is specified for this element. As a result, the text will appear in red.
| <html> <head> <style> p {color: red;} </style> </head> <body> <p>Hello World!</p> </body> </html> |
Now, consider example 2:
Example 2
In this example, a class selector (named “test”) has been added, with a green color specified for this class. Consequently, the text will appear in green, overriding the red color specified for the element selector “p”. This occurs because the class selector is assigned higher priority.
| <html> <head> <style> .test {color: green;} p {color: red;} </style> </head> <body> <p class=”test”>Hello World!</p> </body> </html> |
Now, consider example 3:
Example 3
In this example, an id selector (named “demo”) has been added. As a result, the text will appear in blue, as the id selector takes precedence.
| <html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id=”demo” class=”test”>Hello World!</p> </body> </html> |
Now, consider example 4:
Example 4
In this example, an inline style has been applied to the “p” element. Consequently, the text will appear in pink, as inline styles are granted the highest priority.
| <html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id=”demo” class=”test” style=”color: pink;”>Hello World!</p> </body> </html> |
The specificity hierarchy categorizes CSS selectors into four levels:
To calculate specificity, begin with a base value of 0. Add 100 for each ID, 10 for each class, pseudo-class, or attribute selector, and 1 for each element selector or pseudo-element.
|
Remember: Inline styles have a specificity value of 1000, giving them the highest priority. However, using the !important rule overrides even inline styles. |
Below are examples demonstrating how to calculate specificity values:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style=”color: pink;”> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
When determining which style declaration takes precedence, the selector with the highest specificity value will prevail.
Take into account the following three code fragments:
Example
|
A: h1 |
With specificity values assigned as follows:
Additional Examples Demonstrating Specificity Rules
Equal Specificity: The Latest Rule Takes Precedence – If a rule is duplicated within the external style sheet, the last occurrence will override previous ones.
Example
| h1 {background-color: yellow;} h1 {background-color: red;} |
ID selectors take precedence over attribute selectors in terms of specificity. Consider the following three lines of code:
Example
| div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;} |
The first rule is more specific than the other two and will thus be applied.
Contextual selectors are more specific than single element selectors- The embedded style sheet is closer to the element being styled. Therefore, in the following situation:
Example
| /*From external CSS file:*/ #content h1 {background-color: red;} /*In HTML file:*/ <style> #content h1 {background-color: yellow;} </style> |
The latter rule takes precedence and will be applied.
A class selector like .intro takes precedence over multiple element selectors such as h1, p, div, etc.
Example
| .intro {background-color: yellow;} h1 {background-color: red;} |
The universal selector (*) and inherited values are disregarded, having a specificity of 0.
