CSS cascade explainer
Find the winning color declaration and the deciding cascade step.
- Runs in your browser
- No upload
- Check before download
Inputs stay in this tab and are not uploaded or saved automatically. Optional aggregate usage counts and coarse processing diagnostics are sent only after consent, without input content or filenames. Clearing or closing loses inputs; save needed outputs first.
Resource limits
Color cascade for compound selectors: tag, ID, classes, and is, where and not lists. Up to 64 rules and 16 ordered flat layers. The comparison goes by origin, important, inline, layer, ABC and then source order, and important reverses the layer and origin priority. Ancestry, attributes, states, scope, inheritance, animation, transition and revert are not covered. This is a local, bounded preview, not a universal guarantee for every browser or layout. Inputs are never executed. Download HTML and CSS together. Watchdog: 8 seconds.
How to use
- Configure the example
Describe the target’s tag, ID and classes, then add color rules with their origin, importance, inline flag and layer. Keep the source order intentional.
- Inspect before using
Target p#note.note: the normal author rules .note { color: #0000ff } and #note { color: #ff0000 } in the same layer produce red, because specificity 1,0,0 beats 0,1,0.
- Export the checked result
Read the ordered candidates and the winning color. Change one priority at a time, then compare the safe local preview and the downloaded HTML/CSS together.
Questions and limits
What does this result mean?
Specificity ABC compares IDs, classes and types after the higher cascade priorities. !important changes the priority and reverses the ordering of layers and origins.
How do I resolve rejected or missing input?
Ancestry, attributes or states that aren't supported are not silently simulated. Use supported compound selectors and is/where/not lists, and correct the parser diagnostics.
What are the limits of this tool?
A limited color cascade: ≤64 rules/16 flat ordered layers, with an 8 s watchdog. No inheritance, scope, animation, transition or revert, and it is not a complete browser layout engine.