Selectors, Classes & the Cascade

CSS is only as precise as its selectors. This lesson is the targeting system.

Element, class, ID

p {
} /* every <p> */
.note {
} /* every element with class="note" */
#signup {
} /* the one element with id="signup" */

• Element selectors paint with a roller — good for base typography.
• Classes are the workhorse: reusable, multiple per element (class="card highlight"), and they carry no built-in meaning, so you name them by purpose (.site-nav, .price), not by looks (.big-red — renames hurt).
• IDs select one element. They are more specific than classes (see the cascade below), which makes them dangerous to style with — a single ID rule can quietly beat any number of class rules. Use IDs for anchors and JS hooks; style with classes.

Descendant selectors

Target by ancestry:

nav a {
  color: darkslateblue;
}

Read it right-to-left: "any a inside a nav". Links elsewhere are untouched. This is how you style regions: nav a, article p, footer a.

Grouping

h1,
h2,
h3 {
  font-family: Georgia, serif;
}

One declaration block shared by several selectors — commas, not repetition.

The cascade: who wins?

"CSS" literally contains cascading: when several rules target the same element, the browser resolves conflicts in a definite order. For beginner purposes:

1. Later beats earlier — at equal specificity, the last rule written wins.
2. More specific beats less specific — ID (1,0,0) > class (0,1,0) > element (0,0,1). Count like this: #signup .note p is (1,1,1) — it beats any .note rule.
3. Inline styles beat both (style="…" counts as (1,0,0,0) — avoid them).

p {
  color: gray;
} /* (0,0,1) */
.note {
  color: blue;
} /* (0,1,0) — wins over p for .note elements */
#hero {
  color: teal;
} /* (1,0,0) — wins over everything above */

One important exception — !important forces a declaration to win regardless. It exists for edge cases (user style overrides, utility frameworks). In hand-written CSS it is a code smell: if you need !important to win, your selectors are fighting each other — fix the specificity, not the symptom.

Inheritance, the quiet one

Some properties flow down the tree automatically: color, font-family, line-height. Set font-family once on body, and every child inherits it — that is why global typography lives on body. Layout properties like margin and border do not inherit: each box gets its own.

What you learned

• Element / class / ID selectors and when each is appropriate
• Descendant selectors style by region; grouping shares a block
• Cascade resolution: source order, then specificity (ID > class > element), inline on top
• !important is a smell; inheritance explains body-level typography

Next: units and colors — how CSS measures and paints.