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 !important are applied even if the selector is less specific.
  • …Except for the properties with !important in 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.
  • For :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.

Build your next project with Polypane

  • Try all plans, all features
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Start free trialView pricing
Polypane screenshot