What is Specificity? #
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.
The universal selector (*) has low specificity, while ID selectors are highly specific!
Note: Specificity is a common reason why your CSS-rules don’t apply to some elements, although you think they should.
Specificity Hierarchy #
Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
Inline styles – An inline style is attached directly to the element to be styled. Example:
. #
IDs – An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes – This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements – This category includes element names and pseudo-elements, such as h1, div, :before and :after.
How to Calculate Specificity? #
Memorize how to calculate specificity!
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
Consider these three code fragments:
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div> The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)
Since 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and therefore will be applied.
#
Specificity Rules #
Equal specificity: the latest rule counts – If the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied:
Example #
h1 {background-color: yellow;}
h1 {background-color: red;}the latter rule is always applied.
ID selectors have a higher specificity than attribute selectors – Look at the following three code lines:
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 be applied.
Contextual selectors are more specific than a single element selector – The embedded style sheet is closer to the element to be styled. So in the following situation
Example #
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
he latter rule will be applied.
A class selector beats any number of element selectors – a class selector such as .intro beats h1, p, div, etc:
Example #
.intro {background-color: yellow;}
h1 {background-color: red;} The universal selector and inherited values have a specificity of 0 – *, body * and similar have a zero specificity. Inherited values also have a specificity of 0.
