CSS specificity ranks selectors by their components when the CSS cascade reaches its specificity comparison. In the Selectors Level 4 by World Wide Web Consortium convention, the triple counts ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors respectively. The comparison uses lexicographic order: compare first, then if needed, then .[ref]
For example, p.warning has specificity , .warning.urgent has and #notice has . The ID selector outranks either class-based selector at this stage. The triple is not a base-ten number: sufficiently many classes do not carry into the ID component. A descendant CSS combinator such as the space in article p contributes no count of its own.
Some functional CSS pseudo-classes have explicit exceptions. :where(#notice) contributes zero specificity, while :is(.warning, #notice) takes the maximum specificity of its argument list, here . This is not necessarily the specificity of whichever individual alternative happened to match.[ref]
Specificity is not the whole priority system. Origin, importance and CSS cascade layers can decide before selector counts are compared; later source order can decide a remaining tie. Consequently, an author can override a highly specific normal declaration with a lower-specificity important declaration in the appropriate cascade context.[ref]

Articles by others on the same topic (0)

There are currently no matching articles.