CSS Selectors 101: Targeting Elements with Precision

Why CSS Selectors Are Needed?

CSS exists to style HTML, but before you can style anything, you need a way to choose what you want to style. That’s exactly what CSS selectors do.

Think of selectors as instructions that tell the browser, “Apply these styles to these elements.” Without selectors, CSS would have no idea whether you want to style a heading, a paragraph, or a specific button on the page.

Selectors are the foundation of CSS. If you understand selectors, everything else in CSS becomes easier.

Element Selector

The element selector is the simplest way to target HTML elements. You select elements by their tag name.

For example, if you want to style all paragraphs on a page, you can target the <p> tag directly.

p {
  color: blue;
}

This tells the browser to make the text of every paragraph blue. Element selectors are useful when you want consistent styling across all instances of a tag.

You can think of this like saying, “Everyone who is a teacher, please stand up.”

Class Selector

A class selector lets you target a group of specific elements, even if they are different types of tags.

Classes are defined in HTML using the class attribute and selected in CSS using a dot (.).

<p class="highlight">Important text</p>

.highlight {
  background-color: yellow;
}

Now only elements with the highlight class are styled. This gives you more control than element selectors.

In real life, this is like saying, “Everyone wearing a red badge, please stand up.”

ID Selector

An ID selector is used to target one unique element on the page. IDs should not be repeated.

IDs are defined using the id attribute and selected using a hash (#).

<div id="header">Welcome</div>

#header {
  font-size: 24px;
}

Because IDs are unique, they are very specific. Use them when you want to style one exact element, not a group.

This is like calling someone by their full name instead of by a group label.

Group Selectors

Sometimes you want to apply the same styles to multiple selectors. Instead of repeating code, you can group them using commas.

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

This applies the same font to headings and paragraphs. Group selectors help keep your CSS clean and readable.

It’s similar to saying, “Teachers, students, and staff — please gather here.”

Descendant Selectors

Descendant selectors allow you to target elements inside other elements.

div p {
  color: green;
}

This targets only paragraphs that are inside a <div>. Paragraphs outside a <div> are unaffected.

This selector is powerful because it adds context. You’re not just selecting an element, you’re selecting it based on where it lives.

Think of it as saying, “Everyone in this room wearing a blue shirt.”

Basic Selector Priority (Very High Level)

Sometimes multiple selectors target the same element. When that happens, CSS follows a priority system.

At a very high level:

• ID selectors are stronger than class selectors

• Class selectors are stronger than element selectors

So if the same element is styled by all three, the ID selector wins.

CSS selectors are not about syntax, they’re about precision. They let you choose exactly what you want to style, no more and no less.