CSS Selectors 101

Have you ever written CSS… and nothing changed on the page? Most beginners think CSS is broken. But actually — the browser just didn’t know WHERE to apply the style.That’s where CSS Selectors come in.

Why CSS Selectors Are Needed

HTML builds the structure. CSS adds the design. But CSS needs directions.

Think of it like giving instructions in a classroom:

Selectors work exactly the same way. They help CSS answer one question: Which elements should receive this style?

Without selectors:

• All elements would look the same

• Styling would become impossible to control

• Large websites couldn’t exist

Selectors are the foundation of CSS.

1. Element Selector (Tag Selector)

The most basic selector.
Targets all elements of a given HTML tag.

HTML (Before)

<p>Hello</p>
<p>Welcome</p>

CSS

p {
  color: blue;
}

Result (After)

Both paragraphs turn blue.

Meaning: “Style every paragraph on this page”

This is like saying: "All students listen!"

2. Class Selector

Now we want to style some elements, not all.

We use a class. A class can be reused many times. An element can be part of multiple class .

HTML (Before)

<p class="important">Exam tomorrow</p>
<p>Normal message</p>

CSS

.important {
  color: red;
  font-weight: bold;
}

Result

Only the first paragraph becomes red and bold.

Meaning: “Style elements that belong to this group”

This is like saying: "CSE students listen!"

3. ID Selector

ID targets one unique element.

Each ID should exist only once in a page.

HTML (Before)

<h1 id="title">My Website</h1>
<h1>Another Heading</h1>

CSS

#title {
  color: green;
}

Result

Only the first heading becomes green.

Meaning: “Style this exact element only”

This is like saying: "Ravina, listen!"

Element vs Class vs ID

4. Group Selector

Sometimes multiple elements need the same style.

Instead of repeating code — group them.

CSS

h1, p {
  font-family: Arial;
}

Now both headings and paragraphs get the same font.

Cleaner code , Descendant Selector ,Targets elements inside another element.

HTML

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

<p>Outside card</p>

CSS

.card p {
  color: purple;
}

Result

Only the paragraph inside .card becomes purple.

Meaning: “Select children inside a parent”

Basic Selector Priority (Very Important)

What happens if multiple selectors target the same element?

The browser follows priority:

ID > Class > Element

Example

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

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

Final Color → Green ,because it is more specific and highest priority.

Selector Targeting Flow (Concept)

Browser checks in this order:

1. Find element

2. Check class rules

3. Check ID rules

4. Apply highest priority style

5. Before learning Flexbox, Grid, Animations… Master selectors first.

Because selectors are the language CSS uses to talk to HTML.

If this helped you understand CSS better share it .