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.
  • Child or sibling selectors (>, ~, +) add no specificity.

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing