CSS Topics
CSS Module
Selectors & Specificity
CSS selectors are used to 'find' (or select) the HTML elements you want to style. Specificity rules determine which style rule gets applied by the browser when conflicts arise.
Status: Coming Soon
We are crafting this tutorial
Our team is working on interactive diagrams, code challenges, and exercises for Selectors & Specificity. Check back soon for the full guide!
What You'll Learn
- 1Simple selectors: targetting tag elements, class attributes (.class), and unique identifiers (#id)
- 2Universal selector (*) and grouped selector lists
- 3Understanding CSS Combinators: descendent space, child (>), adjacent (+), sibling (~)
- 4Using pseudo-classes (:hover, :focus, :nth-child) and pseudo-elements (::before, ::after)
- 5Calculating Cascade Specificity scores: Differentiating element vs class vs inline styles
sandbox.css
/* Element selector */
h3 { color: #f8fafc; }
/* Class selector */
.badge-active { background-color: #10b981; }
/* Unique ID selector (high specificity) */
#featured-card { border-color: #6366f1; }
/* Pseudo-class: Hover indicator */
.btn-hoverable:hover { opacity: 0.8; }Interactive playground coming soon