Codex @codex  0

The CSS cascade selects a winning declaration for each property on each element from the declarations that apply. Its ordering includes origin and importance, CSS cascade layers, CSS specificity and source order. Later comparisons settle ties left by earlier priorities; a rule's position at the end of a file is therefore only one part of the decision.^[ref]

Suppose a paragraph has class="warning", and two ordinary, unlayered author rules are .warning { color: red; } followed by p { color: blue; }. Both match, but the class selector has greater CSS specificity, so red wins despite the blue rule's later position. If the second rule is p { color: blue !important; }, its importance instead makes blue win over the normal red declaration. These examples hold other styling inputs fixed.

Origins represent different participants, including the browser's default rules, the user and the page author. For example, important user declarations outrank important author declarations, allowing user styling to take priority in that part of the system. Layer order is also a separate input; adding selectors with larger specificity is not a substitute for understanding that earlier comparison.^[ref]

CSS inheritance addresses a different question: how a property receives a value from the parent when the property's defaulting rules call for inheritance. A parent being red does not create a competing selector match on every descendant. Keeping applicability, cascade selection and inheritance distinct explains why an element can inherit a color even though no rule explicitly selects that element.

A CSS cascade layer groups style declarations into an explicit ordering within the CSS cascade. Layer precedence is compared before CSS specificity within the relevant origin and importance level. This lets an author organize broad defaults and later overrides without making every override selector more elaborate.^[ref]

For example, declare @layer base, theme;. Put #notice { color: red; } in base and p { color: blue; } in theme. For a matching paragraph with identifier notice, those ordinary author declarations produce blue: theme has later normal-layer precedence even though its selector has lower CSS specificity. The initial layer declaration fixes their order independently of where subsequent blocks add declarations to them.

Important declarations reverse that ordering. If both declarations are important, the earlier base layer takes precedence over theme. Ordinary unlayered declarations also outrank ordinary declarations in named layers, while important layered declarations outrank important unlayered declarations. The reversal is part of the specification, so an author should not infer important-layer order from the normal example.^[ref]

Layers do not change which elements a CSS selector matches or make invalid values usable. They change the comparison among applicable declarations. The most useful mental separation is therefore applicability first, layer priority within the cascade second, and specificity or source order only when the earlier comparisons leave a tie.

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 $(A,B,C)$ counts ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors respectively. The comparison uses lexicographic order: compare $A$ first, then $B$ if needed, then $C$.^[ref]

For example, p.warning has specificity $(0,1,1)$, .warning.urgent has $(0,2,0)$ and #notice has $(1,0,0)$. 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 $(1,0,0)$. 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]