Loading BrowserUniverse...
Topic
Tokenizer → parser → stylesheet tree → selector matching → cascade → computed styles → used values.
HTML
sample<div class="card primary"><h2>CSSOM</h2><p>Specificity matters</p></div>
CSS
sample.card { padding: 16px; color: #e2e8f0; }
.card.primary { background: #0f172a; }
div.card.primary { border: 1px solid #22d3ee; }JavaScript
samplegetComputedStyle(document.querySelector('.card')).colorVisualizer
Selector matching, specificity, and computed styles.
Visualizer
From tokens → stylesheet object → selector matching → cascade → computed styles.
Controls
Visualization
Selector match
.card.primary
Specificity: (0, 2, 9)
Cascade: origin (author) → importance (normal) → specificity → source order.
Computed style (sample)
Inspector
Selector matching
Right-to-left matching with pre-scanning and bloom filters in engines.
Cascade layers
Author vs. user vs. UA; importance and specificity decide winners.
Used vs. computed
Computed values become used values after layout converts relative units.
Why this matters
Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.