LESSON 4

Selectors

Learning objective: Target the right elements using different selector types.

Understand

Selectors decide which elements a rule affects.

You can select by element (p), by class (.note), or by id (#main). You can also combine them and select descendants, like nav a for links inside a nav. Choosing precise selectors keeps styles predictable.

Analogy: Selectors are like search filters: the more specific, the fewer elements you match.

See It in Action

Element, class, and id selectors:

p { color: gray; }
.note { color: red; }
#main { padding: 20px; }
How it works: p matches all paragraphs, .note matches elements with class 'note', and #main matches the single element with id 'main'.

Try It Yourself

  1. Style all paragraphs with an element selector.
  2. Add a class and style only elements with it.
  3. Select links inside a nav with nav a.

Quick Quiz

Which symbol selects by class?

Challenge

Style three groups of elements using an element, a class, and an id selector.

Success condition: Each selector type styles the correct elements only.