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 specificity.
- 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 a pseudo class like
:is(), the selector inside it with the highest specificity determines the specificity.
- Anything in a
:where()has no specificity.
:host-context()pseudo-classes the specificity is the combination of the pseudo-class itself (0,1,0) plus the most specific of the selectors in them.
- For the
::slotted()pseudo-element the specificity is the combination of the pseudo-element itself (0,0,1) plus the specificity of the selector inside it.
- Child or sibling selectors (
>, ~, +) add no specificity.
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed