Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain css using a clear mental model · Apply css in practical CSS work
- Last updated
- July 18, 2026
Follow the actual cascade order
First confirm that the selector matches and the declaration applies in the current media or support condition. Then compare origin and importance, cascade layer, specificity, scoping proximity when relevant, and source order.
A highly specific rule in an earlier normal layer can lose to a low-specificity rule in a later layer. Adding another ID or !important without checking this order creates a harder future conflict.
Keep specificity a local tie-breaker
Specificity compares ID selectors, class-like selectors, and type selectors in separate columns. Universal selectors and :where() add no specificity. :is(), :not(), and :has() take specificity from their most specific selector argument.
:where(.article) h2 { margin-block-start: 2em; }
.card:has(> img) { padding-block-start: 0; }
/* Prefer a component modifier over selector escalation. */
.button { background: navy; }
.button--danger { background: darkred; }Use a repeatable debugging workflow
Inspect the element, find crossed-out declarations, and identify the winning rule’s source and layer. Toggle declarations instead of editing blindly. If inheritance is involved, inspect the ancestor that supplies the computed value.
- Does the selector match?
- Is the declaration valid and active?
- Which origin, importance, and layer wins?
- If tied, which specificity wins?
- If still tied, which rule appears later?
Frequently asked questions
Does !important always win?
No. Important declarations still have their own origin and layer ordering, and transitions can temporarily outrank them. It should not be a routine architecture tool.
How can I reduce CSS specificity?
Use classes, :where(), component modifiers, and cascade layers. Remove unnecessary ancestry from selectors and avoid IDs for reusable styling.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps