Selectors

What you'll learn

How to select elements by tag name, by class, and by id.

Why it matters

Styling every <p> the same is rarely what you want. Selectors let you point at exactly the elements you mean.

Explanation

Three selectors cover most of what you need:

• Tag selector: p selects every paragraph.
• Class selector: .note selects every element with class="note". Many elements can share a class.
• ID selector: #title selects the one element with id="title". An id must be unique on the page.

You can also select several things in one rule by separating them with a comma: h1, h2 { ... }.

When two rules conflict, the more specific selector wins: an id beats a class, and a class beats a tag.

Example

<style>
  p {
    color: #333;
  }
  .note {
    background: #fff3cd;
    padding: 8px;
  }
  #title {
    color: royalblue;
  }
</style>

<h1 id="title">Selectors</h1>
<p>A normal paragraph.</p>
<p class="note">A highlighted note.</p>
<p class="note">Another highlighted note.</p>

Step-by-step walkthrough

1. p gives all three paragraphs dark grey text.
2. .note only matches the two paragraphs with class="note" and adds a yellow background.
3. #title matches the single heading with id="title" and colours it blue.
4. The class name in HTML has no dot (class="note"), but the selector in CSS does (.note).

Try it yourself

Add a class called big to one paragraph and write a .big rule that sets font-size: 28px.

Common mistakes

• Forgetting the dot in a class selector (note instead of .note).
• Reusing an id on many elements. Use a class when you need to reuse.
• Spaces in the wrong place. .a.b means one element with both classes. .a .b means .b inside .a.
• Fighting specificity with !important. Prefer simpler, clearer selectors.

Quick quiz

Summary

• tag, .class and #id are the core selectors.
• Commas group selectors; ids beat classes beat tags in specificity.
• Prefer classes for reusable styles.

Next: colours and fonts.