CSS Selectors

In the last lesson you learned about CSS Syntax. You saw that a rule has a selector, and then some styles inside the braces. Now let’s look at that first part more closely. This lesson is all about selectors.

🎯 What is a Selector?

A selector is the part of a CSS rule that picks which HTML elements get the style. You point at something on the page. Then you tell the browser how it should look.

Think of a classroom. The teacher says “all students in the front row, stand up.” That sentence has two parts. First it picks the people, the front row. Then it tells them what to do, stand up. A CSS selector is that first part. It picks the elements. The styles inside the braces are the “what to do”.

Here is the shape of a rule, so you can see where the selector sits.

selector {
  property: value;
}

So in p { color: blue; } the selector is p. It picks every paragraph on the page. Then color: blue; is the instruction.

🤔 Why do we need selectors?

A web page has many elements. Headings, paragraphs, buttons, images, and more. You almost never want all of them to look the same. So you need a way to say “this one, not that one”. That is the whole job of a selector.

Here is what selectors let you do.

• Target just one button and leave the rest alone.
• Style a whole group, like every paragraph, in one short rule.
• Reuse the same style on many elements across the whole site.

🧩 The Element Selector

The simplest selector is the element selector. You just write the name of the HTML tag. Then it picks every element of that type.

This rule makes the text of every paragraph gray.

p {
  color: gray;
}

It does not matter if you have two paragraphs or twenty. They all turn gray. Here is the HTML it would affect.

<p>This paragraph turns gray.</p>
<p>So does this one.</p>

🆔 The Class Selector

Often you want only some elements styled, not every one of the same tag. For that we use a class. A class is a name you put on an element so you can pick it later.

You add the name in the HTML with the class attribute. Then in CSS you point at it with a dot . before the name.

First we give one paragraph a class called warning in the HTML.

<p class="warning">Please save your work.</p>
<p>This is a normal line.</p>

Now we style only the element with that class. See the dot before the name.

.warning {
  color: red;
}

Only the first paragraph turns red. The second one stays normal, because it does not have the class. The nice thing is, you can put the same class on many elements, even on different tags. So one class can style a paragraph, a heading, and a button all at once.

🔑 The ID Selector

An ID is also a name you give an element. But it is meant for one single element only. You use it when there is just one of something on the page, like the main header or the page footer.

You add it in HTML with the id attribute. In CSS you point at it with a hash # before the name.

Here we mark one element with an id called main-title.

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

Then we style that one element. Notice the # this time.

#main-title {
  color: green;
}

Here is the big difference from a class. A class can be used many times. An ID should be used only once per page. So reach for a class most of the time. Keep IDs for the one special element.

📋 The Three You Will Use Most

Here is a quick side-by-side, so you remember which symbol goes with which selector.

🎁 A Few Handy Extras

Once you know the three basic ones, these come in useful too.

• The universal selector * picks every single element on the page. People often use it to reset spacing.
• You can group selectors with a comma. So h1, h2, p { color: black; } styles all three at once.
• You can combine them. So p.warning picks only paragraphs that also have the warning class.

This rule removes the default outer spacing from everything on the page.

* {
  margin: 0;
}

⚠️ Common Mistakes

These are the slips that catch most beginners. Watch for them.

• Forgetting the dot or hash. Writing warning { } targets a <warning> tag, which does not exist. You meant .warning { }.
• Using the same id twice on a page. The browser may style only the first one, and it is not valid HTML.
• Putting a space by mistake. So .nav .link with a space means something different from .nav.link. The space says “link inside nav”. You will learn that later. A piece that joins selectors like this is called a combinator.
• Naming a class after its color, like .blue. Name it after its purpose instead.

✅ Best Practices

A few simple habits keep your CSS clean.

• Use classes for most of your styling. They are flexible and you can reuse them.
• Keep IDs for the rare element that is truly one of a kind.
• Give names that describe the role, like nav-bar or error-text, not the look.
• Use lowercase and a dash for names with many words, like main-title.

🧩 What You’ve Learned

Here is what you can take away from this lesson.

• ✅ A selector is the part of a CSS rule that picks which elements get styled.
• ✅ The element selector, like p, picks every element of that tag.
• ✅ A class selector uses a dot, like .warning, and you can reuse it on many elements.
• ✅ An ID selector uses a hash, like #main-title, and should be used only once per page.
• ✅ * picks everything, and a comma lets you group several selectors in one rule.

🚀 What’s Next?

Now that you can pick elements, let’s learn how to leave notes in your CSS that the browser ignores. Those are comments.

CSS Comments