What is CSS selector specificity?
If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector: elements, ID's, classes etc. This specificity is split up in different levels.
A single value in a higher level is more important than all levels below it. For example, you can have a 1000 class names, and a selector with a single ID would still be more specific.
Gotcha's when dealing with CSS selector specificity issues
- The universal selector
*has no value.
- properties with
!importantare applied even if the selector is less specific.
- …Except for the properties with
!importantin same or a higher specificity selectors later in your CSS.
- …Except for the
style=""attribute on an element.
- If you use
:not(), only the items inside it count towards specificity.
:is(), the selector in it with the highest specificity determines the specificity.
- Anything in a
:where()has no specificity.
- Child or sibling selectors (
>, ~, +) add no specificity.