foundation
Selectors & Specificity
Understand how selectors target elements and how specificity resolves conflicts.
Learning checklist
- Pseudo-classes & pseudo-elements
- Specificity math and the cascade
- :is(), :where(), and :has()
Definition
Understand how selectors target elements and how specificity resolves conflicts.
Syntax
Example
Deep dive
Why this matters
Principles, mental models, and debugging clues tailored to the topic.
Visual intuition
Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.
Copy-ready CSS
Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.
Performance notes
Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.
Accessibility first
Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.
Practice
Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.
Tip: use DevTools overlays (grid/flex) plus the copy CSS button.
Selectors & Specificity
Pick a selector to highlight matched nodes and see its specificity tuple.
Hero title
A subtitle under the hero.
This is a card title
- Item one
- Item two
- Item three
<section class="hero">
<h3 class="title">Hero title</h3>
<p class="subtitle">A subtitle under the hero.</p>
<button id="cta" class="btn">Call to action</button>
</section>
<section class="card">
<div class="badge">badge</div>
<p class="title">This is a card title</p>
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<nav class="nav">
<a href="#">Link A</a>
<a href="#">Link B</a>
</nav>
</section>Related topics
Keep exploring adjacent concepts.
foundation
Cascade & Inheritance
Dive deep into the cascade layers, inheritance rules, and how importance is calculated.
View page