Specificity is the precedence score CSS uses when competing declarations could style the same element. The browser first considers whether a value is inherited, then compares selector types and their calculated values; the greatest value wins. section 1.5
Selector types contribute different amounts to a specificity value:
- ID selectors contribute 100. section 1.5
- Class selectors, attribute selectors, and pseudo-classes contribute 10. section 1.5
- Type selectors and pseudo-elements contribute 1; universal selectors contribute 0. section 1.5
- If values tie, stylesheet origin and declaration order decide; a later rule in the same stylesheet wins. section 1.4 section 1.5
Override only the columns that need it
A general th rule can left-align every table header, while the more specific th:nth-of-type(n+3) rule overrides text-align for later columns and keeps them right-aligned. This uses the cascade deliberately instead of adding stronger selectors everywhere. section 8.4.2
:where() always has specificity 0, while :is() takes the specificity of its most specific argument. Thus input[type="radio"]:checked and :is(input[type="radio"], input[type="checkbox"]):checked calculate to 021, overriding a 011 selector. section 10.3.9
Inline styles take very high priority but couple presentation to HTML and become repetitive. Use !important cautiously: it short-circuits the normal cascade, complicates maintenance, and should generally be avoided in author stylesheets. section 1.3.1 section 1.4.6
