CSS selectors and the cascade: trace the winning declaration

Trace a real component

A receipt status appears inside a summary card. Keep the selector local to that component. The code below gives the status a dark foreground while the card sets its own background. A later rule with the same specificity wins for the status; a broad element selector does not.

.receipt-summary { background: #f1f4f8; }
.receipt-summary .status { color: #243b53; }
.receipt-summary .status { color: #165a42; }
span { color: #9b3030; }

The computed status color is #165a42. Both component rules have the same selector and importance, so their order breaks the tie. The span rule has lower specificity. Do not escalate every conflict with !important; it makes later overrides harder to reason about.

Costs and boundaries

Selector matching is rarely the first performance problem in a small page. Deep, brittle selectors cost more in maintenance: moving one wrapper can break styling across a product. Prefer a stable class for the component and inspect the computed style when an override surprises you.

Common Mistakes

• Source order cannot beat a declaration that already won on importance or specificity.
• Inline style and !important have different positions in the cascade.
• A color that works on a pale card may fail contrast on a dark theme.

Read next

Use the box model and layout lesson to size the card, then check small-screen behavior.