CSS Selector Specificity

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 !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 a pseudo class like :not() or :is(), the selector inside it with the highest specificity determines the specificity.
• Anything in a :where() has no specificity.
• For :nth-child(), :nth-last-child(), :host() and :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.