Selectors and the Cascade
Select elements with type, class, ID, and attribute selectors. Understand specificity, inheritance, and the cascade to predict which styles win.
Selectors and the Cascade is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is CSS?
CSS (Cascading Style Sheets) is the language that controls visual presentation. You write rules — each rule has a selector that targets elements and a declaration block with property-value pairs.
selector {
property: value;
another-property: value;
}Type, Class, and ID Selectors
The three fundamental selectors: type targets all elements of a tag (p), class targets elements with a class (.card), ID targets one element by id (#logo). Prefer classes — IDs have very high specificity.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */Attribute and Pseudo-class Selectors
Select by attribute value with [type="email"]. Use pseudo-classes for state: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }Combinators
Combinators describe relationships between elements: space (descendant), > (direct child), + (adjacent sibling), ~ (general sibling).
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */Specificity: Who Wins?
When multiple rules target the same element, specificity determines which wins. ID selectors (0,1,0,0) beat class selectors (0,0,1,0) which beat type selectors (0,0,0,1). Inline styles beat all. !important beats everything — use it as a last resort.
Calculating Specificity
Count IDs, classes/attributes/pseudo-classes, and types separately. Compare column by column. Example: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). The first wins.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }The Cascade: Order Matters
When specificity is equal, the rule that appears later in the stylesheet wins. This is the C in CSS — the cascade. Import order and source order both matter.
Inheritance
Some CSS properties are inherited by default — children receive the parent's value without you setting it. Text-related properties like color, font-family, and line-height inherit. Box-model properties like margin do not.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}The :is() and :where() Selectors
:is() and :where() let you write concise selectors that match any of a list. The difference: :is() inherits the highest specificity of its arguments; :where() always has zero specificity.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}The Universal Selector *
The universal selector * matches every element. It's commonly used in CSS resets: *, *::before, *::after { box-sizing: border-box; } which makes the box model much more predictable.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}Browser Default Styles
Browsers apply their own default stylesheet (the user agent stylesheet) before yours. CSS resets (like normalize.css) or CSS layers neutralise these defaults so your styling starts from a known baseline.
Quick Check
Which selector has the highest specificity?
Recap: Selectors and the Cascade
Target elements with type, class, ID, attribute, and pseudo-class selectors. Specificity resolves conflicts (IDs > classes > types). The cascade breaks ties using source order. Inheritance propagates text styles to descendants automatically.
Frequently asked questions
Is the “Selectors and the Cascade” lesson free?
Yes — the full text of “Selectors and the Cascade” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Selectors and the Cascade”?
Select elements with type, class, ID, and attribute selectors. Understand specificity, inheritance, and the cascade to predict which styles win. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Selectors and the Cascade” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.