CSS Selectors Explained

Why Do We Need CSS Selectors?

Imagine you have a webpage with:

• headings

• paragraphs

• buttons

• cards

• links

CSS needs a way to answer one simple question:

Which element should I style?

That’s exactly what CSS selectors do.

Selectors are used to choose HTML elements so CSS can apply styles to them.

Without selectors, CSS wouldn’t know where to apply styles.

CSS Selectors = Ways to Choose Elements

Think of CSS selectors like addressing people.

• “All students” → element selector

• “Students wearing red shirts” → class selector

• “That one student with roll no. 12” → ID selector

CSS works the same way.

Element Selector

The element selector selects HTML elements by their tag name.

Example

HTML

<p>This is a paragraph</p>
<p>This is another paragraph</p>

CSS

p {
  color: blue;
}

Result

All <p> elements become blue.

Use element selectors when:

• You want to style all elements of the same type

Class Selector

The class selector targets elements with a specific class.

Syntax

.class-name

Example

HTML

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

CSS

.highlight {
  color: red;
}

Result

Only the paragraph with class highlight is red.

Use class selectors when:

• You want to style multiple specific elements

ID Selector

The ID selector targets a single unique element.

Syntax

#id-name

Example

HTML

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

CSS

#main-title {
  color: green;
}

Result

Only that one heading is styled.

Rules:

• IDs must be unique

• Use IDs sparingly

Group Selectors

Group selectors let you apply the same style to multiple selectors.

Example

CSS

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

Result

h1, h2, and p all use Arial.

Use group selectors to:

• Avoid repeating CSS

• Keep styles clean

Descendant Selectors

Descendant selectors target elements inside other elements.

Syntax

parent child

Example

HTML

<div class="card">
  <p>This text is inside card</p>
</div>

<p>This text is outside card</p>

CSS

.card p {
  color: blue;
}

Result

Only the paragraph inside .card turns blue.

This is very useful for layouts and components.

Basic Selector Priority (High-Level Only)

Sometimes multiple selectors target the same element.

CSS follows a simple priority rule:

ID selector > Class selector > Element selector

Example

p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}

If an element has all three:

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

Red wins because ID has higher priority.

Don’t worry about memorizing this now.
Just remember: ID is stronger than class, class is stronger than element.

CSS works like this:

1. Read selector

2. Find matching elements

3. Apply styles

Why CSS Selectors Are So Important

Selectors are the foundation of CSS.

If you understand selectors:

• Styling becomes easy

• Layouts make sense

• Debugging becomes faster

Everything in CSS starts with:

Which element am I targeting?

---

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn