Why does a later CSS rule lose even though it appears last?

Because “last in the file” is only one possible deciding factor. The cascade considers origin and importance before specificity; specificity is compared among declarations in the origin and layer that has precedence. If declarations are otherwise tied, later cascade steps—including scoping proximity and order of appearance—may decide the result. [S1]

Start by checking which declarations actually match the element. In your browser’s developer tools, open the element’s Styles panel and find the property, such as color. Look for the winning declaration and any competing declarations crossed out. The panel can show declarations that matched but lost through cascade, specificity, or source order. [S2]

Suppose a paragraph is inside an element with class card, and both rules match that paragraph:

@layer components {
  .card p { color: navy; }
}

.card p { color: tomato; }

Even though the unlayered rule appears later, this example illustrates a layer difference: normal unlayered author styles outrank normal layered author styles. [S2] Moving the layered rule later would not, by itself, change that precedence.

For a practical fix, first decide which rule should own the style. You might put the intended rule in the appropriate layer or remove an obsolete competing declaration. Avoid changing selectors until you have confirmed the actual conflict.

Check origin and importance before comparing specificity. Specificity is compared only among declarations in the origin and layer that has precedence. If declarations are otherwise tied, later cascade steps such as scoping proximity and order of appearance can decide the result. [S1]

In the Styles panel, inspect the winning and crossed-out declarations, including their cascade context. Comparing selectors alone may not settle the conflict if an earlier cascade step already determines which declaration takes precedence. The precise outcome depends on the declarations and context on your page, so use the panel’s evidence rather than guessing from line order.

Use this order of investigation:

1. Select the affected element and identify the exact property that looks wrong.
2. In Styles, find the declaration taking effect and any crossed-out declarations for that property. [S2]
3. Check origin and importance before comparing specificity. [S1]
4. Check the layer context, including whether a normal author declaration is unlayered. Normal unlayered author styles outrank normal layered author styles. [S2]
5. Compare specificity among declarations in the relevant origin and layer. If they are otherwise tied, consider later cascade steps such as scoping proximity and source order. [S1]
6. Make one focused change and recheck the same property in Styles.

For the example above, if the unlayered .card p rule is active and the layered declaration is crossed out, the layer difference explains why the later rule wins. If a different declaration is active, follow the cascade context shown for that conflict instead. Choose a fix for the cause you identify; do not add !important just because the first attempt failed.