CSS Selectors 101: How CSS Knows What to Style

When I first started writing CSS, I just copied whatever I saw online.

p { color: blue; } — okay, that makes paragraphs blue. Fine.

But I did not actually understand why that worked. How does CSS know which element to target? What if I only want to style one specific paragraph, not all of them?

That confusion is exactly what this post is about.

The Core Problem CSS Selectors Solve

A typical webpage has a lot of elements on it. Headings, paragraphs, buttons, images, links, sections. Dozens of them, sometimes hundreds.

If you want to change the colour of just the main heading, or add a background to one specific button, you need a way to point at that element and say — this one. Style this one.

That is what CSS selectors are. They are how you tell the browser which element to apply a style to.

Without selectors, CSS would just be a list of properties with no idea where to put them.

A Simple Way to Think About It

Imagine you are in a crowded room and you need to get someone's attention.

You could say "everyone" — the whole room turns around. You could say "all the engineers" — only a specific group responds. Or you could say "hey Rahul" — one specific person looks up.

CSS selectors work exactly the same way.

• Element selectors — everyone of this type

• Class selectors — people in this group

• ID selectors — one specific person

Let's go through each one.

1. Element Selector

The simplest selector. You just write the tag name.

css

p {
  color: blue;
}

This targets every single <p> element on the page and makes it blue. All of them. No exceptions.

html

<p>This is paragraph one</p>
<p>This is paragraph two</p>

Both paragraphs turn blue.

Use this when you want to apply the same style to every element of a particular type. Things like setting a default font size for all headings, or giving all images a border radius.

css

h1 { font-size: 32px; }
p  { line-height: 1.6; }
img { border-radius: 8px; }

2. Class Selector

Element selectors are too broad sometimes. You do not always want to style every paragraph. Maybe you just want to highlight one specific one.

That is what classes are for.

You add a class to the HTML element:

html

<p>This is normal text</p>
<p class="highlight">This is the important bit</p>

Then in CSS, you target it with a dot:

css

.highlight {
  background-color: yellow;
}

Only the element with class="highlight" gets the yellow background. The other paragraph is left alone.

The real power of classes is that they are reusable. You can put the same class on ten different elements — a paragraph, a div, a span — and they all pick up the same style. You write the rule once and use it everywhere.

3. ID Selector

An ID targets one specific, unique element on the page.

HTML:

html

<h1 id="main-title">Welcome</h1>

CSS uses a hash symbol:

css

#main-title {
  color: darkgreen;
}

Only the element with id="main-title" gets styled.

The important rule with IDs — each ID should only appear once per page. It is meant for a single unique element, not a group. Think of it like a national ID number. Two people cannot have the same one.

4. Group Selectors

Sometimes multiple elements need the exact same style.

You could write:

css

h1 { font-family: Arial; }
h2 { font-family: Arial; }
h3 { font-family: Arial; }

Or you could just group them with a comma:

css

h1, h2, h3 {
  font-family: Arial;
}

Same result. Much less code. Much easier to maintain.

5. Descendant Selectors

This one is useful when you want to style an element only when it appears inside a specific parent.

html

<div class="article">
  <p>This paragraph is inside the article</p>
</div>

<p>This paragraph is outside the article</p>

css

.article p {
  color: gray;
}

The CSS reads: "target all <p> elements that live inside something with the class article."

The paragraph inside .article turns gray. The paragraph outside is untouched.

This is how you style elements based on where they are in the page structure, not just what they are.

When Multiple Selectors Target the Same Element

Here is something that trips up beginners.

What happens when two different selectors are both trying to style the same element?

css

p        { color: blue; }
.text    { color: green; }
#special { color: red; }

And the element in HTML is:

html

<p id="special" class="text">Hello</p>
```

Which colour wins?

The answer comes down to **specificity** — basically a priority system CSS uses to decide which rule is more specific.

At a beginner level, just remember this order:
```
ID  >  Class  >  Element

So in the example above, the text turns red. The ID selector wins because it is the most specific.

Why This Actually Matters

Once you understand selectors, CSS stops feeling random.

You are not just throwing styles at the page and hoping things work. You are precisely targeting elements, building logical groups, and structuring your stylesheet in a way that scales.

Every CSS rule follows the same pattern:

css

selector {
  property: value;
}

The selector is the most important part of that. Get it right, and the rest follows naturally.

Final Thoughts

CSS selectors are not complicated once you see what problem they are solving.

• Element selectors — style all elements of a type

• Class selectors — style a reusable group

• ID selectors — style one unique element

• Group selectors — apply the same style to multiple elements at once

• Descendant selectors — style elements based on where they sit in the page

These five will cover the vast majority of what you need when you are starting out.

There are more advanced selectors out there — pseudo-classes, attribute selectors, combinators — but once you are solid on these basics, those are just extensions of the same idea.

Thanks for reading.