Goal

You’ll be able to choose the right selector type for a given situation instead of reaching for the same one every time out of habit, and you’ll understand how selectors can be combined to target exactly the elements you mean, and nothing else.

Learn

CSS gives you several ways to target elements, and each fits a genuinely different situation. Understanding the differences precisely matters, because choosing the wrong one is one of the most common sources of “why isn’t my CSS applying” confusion.

• Element selector — p { } — targets every element of that tag, everywhere on the page. Broad and useful for base styling you want applied universally, like default paragraph spacing.
• Class selector — .card { } — targets any element with class="card". The same class can be reused on as many elements as you want, which is exactly why classes are the workhorse selector for most real styling.
• ID selector — #header { } — targets exactly one element with id="header". IDs must be unique on a page; the browser won’t stop you from reusing one, but it breaks the assumption ID-based tools (including JavaScript) rely on.
• Descendant combinator — .card p { } — targets a <p> only when it’s nested somewhere inside something with class card, no matter how deeply nested.
• Child combinator — .card > p { } — a stricter version: targets a <p> only when it’s a direct child of .card, not nested any deeper than one level.

You can also combine multiple classes on one element, and target that specific combination:

.card.featured {
  border: 2px solid gold;
}

This targets an element that has both the card class and the featured class — notice there’s no space between them, which is what signals “both classes on the same element” rather than “featured nested inside card.”

The real skill isn’t memorizing this syntax; it’s recognizing your actual intent before choosing a selector: do you want every element of a type, a reusable styled group, one specific unique element, or something nested in a particular structural relationship?

Decision Task

You have three buttons on a page, all needing the same blue styling, plus one special “Delete Account” button that needs to look different (red) from the rest. Before reading on: would you use a class or an ID for the three normal buttons? What about the one special button?

Reveal the Answer

Use a class (like .btn) for the three normal buttons, since a class is designed to be reused across multiple elements. For the one special button, either a class specific to it (like .btn-danger) or an ID technically works, but a class is usually still preferred in real projects, since IDs carry extra restrictions (required uniqueness, higher specificity that can complicate later overrides) that aren’t actually needed here — and if you ever need a second “danger” button elsewhere, a class can be reused immediately while an ID cannot.

Common Mistake

New developers often reach for IDs by default because they feel more “official” or precise. This backfires the moment you need that same style twice; since IDs must be unique, you can’t reuse one, and you end up duplicating the entire CSS rule under a second ID instead of just reusing one class in a second place.

Practice Questions

1. Write a selector that targets every <li> element that is a direct child of an element with class .menu.

Show Answer

.menu > li

2. What’s the difference between .card .title and .card.title? Explain in your own words.

Show Answer

.card .title targets a descendant with class “title” nested inside something with class “card” (two separate elements); .card.title targets one single element that has both classes at once.

3. You need to style a “primary” button and a “primary large” button. Would you create two entirely separate classes, or one base class plus a second combinable class? Explain your reasoning.

Show Answer

One base class (like .btn-primary) plus a second combinable class (like .btn-large) is more reusable, since “large” might apply to other button types later too.

4. True or False: an ID selector can be reused on multiple elements as long as they’re all similar buttons.

Show Answer

False — IDs must be unique per page.

5. Given <div class="alert warning">, write a selector that targets this element specifically because it has both classes, not just one.

Show Answer

.alert.warning

Try It Yourself

Write a selector that targets only <a> elements that are inside something with class .sidebar — meaning a sidebar link, not any link anywhere on the page.

Show Answer

did you write .sidebar a { }? That’s the descendant combinator pattern from this lesson, applied to a new case.

Quick Check

1. Which selector type can be reused on multiple elements: class or ID?

Show Answer

Class.

2. What does .card p target?

Show Answer

Any paragraph nested anywhere inside an element with class “card”.

3. What’s the difference between a descendant combinator and a child combinator?

Show Answer

Descendant matches any depth of nesting; child combinator (>) matches only direct children, one level deep.

4. Write a selector that targets only <a> elements that are inside something with class .sidebar — meaning a sidebar link, not any link anywhere on the page.

Show Answer

did you write .sidebar a { }? That’s the descendant combinator pattern from this lesson, applied to a new case.

5. You have three buttons on a page, all needing the same blue styling, plus one special “Delete Account” button that needs to look different (red) from the rest. Before reading on: would you use a class or an ID for the three normal buttons? What about the one special button?

Show Answer

Use a class (like .btn) for the three normal buttons, since a class is designed to be reused across multiple elements. For the one special button, either a class specific to it (like .btn-danger) or an ID technically works, but a class is usually still preferred in real projects, since IDs carry extra restrictions (required uniqueness, higher specificity that can complicate later overrides) that aren’t actually needed here — and if you ever need a second “danger” button elsewhere, a class can be reused immediately while an ID cannot.