CSS Selectors: A Beginner's Guide

Why do CSS selectors exist?

HTML gives structure to a webpage.
CSS gives it style.

But here is the problem:

A webpage can have hundreds of elements.
How do you tell the browser which ones to style?

That is exactly what CSS selectors do.

CSS selectors are ways to choose elements so styles can be applied to the right places.

No selectors = no control.

Think of selectors like addressing people

Imagine you want to give instructions.

• “Everyone listen”

• “People wearing blue shirts listen.”

• “John, listen.”

Each sentence targets people with increasing precision.

CSS selectors work the same way.

Element selector (the broadest)

The element selector targets all elements of a given type.

Example:

p {
  color: blue;
}

Meaning:

“Style every <p> element.”

When to use it

• global styling

• basic defaults

• simple layouts

Class selector (most commonly used)

The class selector targets elements with a specific class.

Example:

.card {
  border: 1px solid gray;
}

HTML:

<div class="card"></div>
<p class="card"></p>

Meaning:

“Style any element that has this class.”

Why are classes popular

• reusable

• flexible

• Multiple elements can share a class

This is the default choice for most styling.

ID selector (very specific)

The ID selector targets a single unique element.

Example:

#header {
  background: black;
}

HTML:

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

Meaning:

“Style the element with this exact ID.”

Important rule

• IDs must be unique

• One ID per page

• One element per ID

IDs are precise.

Class vs ID (when to use what)

Rule of thumb

• Use class for styling

• Use id sparingly, mostly for layout anchors or JS hooks

Group selectors (apply the same style to many)

Sometimes multiple selectors need the same style.

Instead of repeating code, group them.

Example:

h1, h2, h3 {
  font-family: sans-serif;
}

Meaning:

“Apply this style to all these elements.”

This keeps CSS clean and readable.

Descendant selectors (target elements inside elements)

Descendant selectors target elements based on hierarchy.

Example:

.card p {
  color: gray;
}

Meaning:

“Select <p> elements that are inside .card.”

Only p inside .card is styled.

This is how layout-specific styling works.

Basic selector priority

Sometimes multiple selectors target the same element.

Which one wins?

At a very high level:

ID > Class > Element

Example:

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

If all apply to the same <p>:

• ID wins

• then class

• then element