CSS Specificity
Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to that element.
The Specificity Hierarchy
Every selector has its place in the specificity hierarchy. From lowest to highest:
- Type selectors (e.g.,
h1) and pseudo-elements (e.g.,::before). - Class selectors (e.g.,
.example), attribute selectors (e.g.,[type="radio"]), and pseudo-classes (e.g.,:hover). - ID selectors (e.g.,
#example). - Inline styles (e.g.,
style="font-weight:bold").
A more specific selector will always override a less specific one.
Example
html
<p id="test">Hello</p>
<style>
#test { color: green; } /* ID selector wins */
p { color: red; } /* Type selector loses */
</style>Test Yourself with an Exercise
Which of the following selectors has the highest specificity?