CSS Selectors

Let me ask you something.

Imagine you are in a room full of people and you want to give a message to just one specific person. You would call their name, right? Or maybe you want to give the same message to everyone wearing a red shirt. Or maybe you want to tell something to absolutely everyone in the room.

That is exactly what CSS selectors do.

A selector is how you tell CSS which element on the page you want to style. Before you can change any color, any font, any spacing — you first have to point at something and say that one. That is your selector.

This is one of the most important things to understand in CSS. Everything else builds on top of it. So let us go through each type one by one.

The Element Selector

The element selector targets every single element of a certain type on your page.

So if you write this in your CSS:

h1 {
  color: red;
}

Every h1 on your page turns red. Not just one. All of them.

Same with paragraphs:

p {
  color: blue;
}

Every single p tag on your page now has blue text.

This is great when you want a consistent style across all elements of the same type. Like making every paragraph the same font size or every heading the same color.

Here is what is happening line by line:

h1 {
  color: red;
}

• h1 is the selector — we are targeting all h1 elements
• The curly brackets hold all the styles we want to apply
• color: red is the rule — the property is color and the value is red

Output — every h1 on the page appears in red.

The Class Selector

Now what if you do not want to style every element of a type? What if you just want to style one specific element or a specific group of elements?

That is where classes come in.

A class is like a label you stick on an element in HTML. Then in CSS you target that label. First you add the class in your HTML:

<h1 class="main-title">Netflix</h1>

Then in your CSS you target it using a dot before the class name:

.main-title {
  color: red;
}

The dot is important. That is how CSS knows you are targeting a class and not an element.

Here is the beautiful thing about classes. You can put the same class on multiple elements and they all get the same style. And one element can have multiple classes too.

<h1 class="main-title">Netflix</h1>
<p class="main-title">Unlimited movies and more</p>

Both of these will now be red because they share the same class.

Output — the h1 and the paragraph both appear in red because they share the main-title class.

The ID Selector

An ID is similar to a class but with one big difference.

An ID should only be used on one single element on the whole page. It is unique. Think of it like a name tag — two people in the same room should not have the same name tag.

You add it in HTML like this:

<h1 id="logo">Netflix</h1>

And in CSS you target it using a hash symbol:

#logo {
  color: red;
}

So when do you use a class and when do you use an ID?

• Use a class when you want to apply the same style to multiple elements
• Use an ID when something is completely unique on the page — like a logo or a main navigation bar

In real projects, classes are used far more often than IDs. But it is good to know both.

Output — only the element with the id of logo turns red.

The Universal Selector

The universal selector targets absolutely everything on the page. Every single element.

* {
  color: red;
}

That asterisk means everyone. Every heading, every paragraph, every button, every image container — all of it gets that style applied.

You will not use this for colors or fonts usually. But you will use it a lot for one very specific thing — resetting default browser styles. We will talk about that in detail in its own lesson later.

For now just know it exists and it means target everything.

Output — every element on the page turns red.

Grouping Selectors

What if you want to apply the same style to multiple different elements? You could write them separately but there is a cleaner way.

You can group selectors together using a comma:

h1, h2, p {
  color: red;
}

This says make all h1 elements, all h2 elements, and all p elements red — all in one rule. Clean and simple.

This is something you will use all the time in real projects. It keeps your CSS shorter and easier to read.

Output — all h1, h2, and p elements on the page appear in red.

Quick Summary