CSS Selectors 101: Targeting Elements with Precision
How CSS knows exactly what to style, Lets know deeply.
Turning chai into code and ideas into full-stack applications. Sharing lessons from my development journey, one commit at a time.
When you first start learning CSS, it feels simple - you just change colors, fonts, and spacing. But very quickly, one important question appears:
How does CSS know which element to style?
That’s where selectors come in.
In this blog, we’ll understand what CSS selectors are, why they are important, and how they help you target elements precisely. This is one of the most foundational concepts in CSS, and once you understand it, styling becomes much easier and more logical.
What Will Be Covered in This Blog
In this guide, we’ll cover:
What CSS is and why we use it
What CSS selectors are
Why selectors are necessary
Element selector
Class selector
ID selector
Group selector
Descendant selector
Basic idea of selector priority
We’ll move step by step — simple and clear.
What is CSS?
CSS stands for Cascading Style Sheets.
If HTML is the skeleton of a webpage, then CSS is the design.
Just like dence CSS is also an art 🙂↔️. (Caution: Just meme things)
HTML gives structure:
<h1>Hello</h1>
<p>Welcome to my site</p>
CSS gives appearance:
h1 {
color: blue;
}
With CSS, you can:
Change colors
Set fonts
Add spacing
Create layouts
Make responsive designs
But here’s the key question:
When there are many elements on a page…
How does CSS know which one to style?, Like how
Here comes CSS selectors.
CSS Is Not Just “Styling” — It’s Controlled Styling
When i just started CSS, i was thinking:
“CSS just changes colors and fonts.”
But CSS is actually about controlled targeting.
If a webpage has:
1 heading
5 paragraphs
3 buttons
10 divs
CSS needs a way to say:
“Style all paragraphs”
“Style only this button”
“Style paragraphs inside this section”
“Style this one special element differently”
That control happens because of selectors.
Without selectors, CSS would apply everywhere randomly.
Selectors are what make CSS precise instead of chaotic.
How the Browser Reads a Selector
When the browser sees CSS like this:
p {
color: blue;
}
It does something like this internally:
Look at all HTML elements
Find every
<p>Apply blue color to them
Selectors are like filters.
They filter the HTML and choose matching elements.
CSS Selectors
A CSS selector is a rule that tells the browser:
“Apply this style to THESE elements.”
Selectors are how CSS chooses elements.
Think of selectors like addressing people in a room:
“Everyone” → element selector
“People wearing red shirts” → class selector
“John only” → ID selector
Selectors simply help CSS target the correct elements.
Why Do We Need Selectors
Imagine this HTML:
<h1>Welcome</h1>
<p>Hello</p>
<p>World</p>
Now imagine writing CSS like this:
color: red;
The browser would not know:
Should the heading be red?
Should both paragraphs be red?
Or just one?
Selectors solve this confusion.
They allow you to:
Style specific elements
Avoid changing everything
Keep design organized
Write clean and controlled CSS
Without selectors, CSS would be chaotic.
Selectors are the targeting system of CSS.
Element Selector
Now lets know about Element Selector.
The most basic selector.
It targets all elements of a specific type.
Example:
p {
color: blue;
}
This makes all <p> elements blue.
If you have:
<p>First</p>
<p>Second</p>
Both will become blue.
Element Selectors :
Applies to all matching tags
Lowest priority
Class Selector
Class Selectors are used when you want to style specific elements.
like…
HTML:
<p class="highlight">Important</p>
<p>Normal</p>
CSS:
.highlight {
color: red;
}
Only the paragraph with attribute class highlight will become red.
Class selectors:
Starts with a dot
.Can be reused on multiple elements
More specific than element selector
ID Selector
Id Selectors are used for one unique element.
HTML:
<h1 id="main-title">Welcome</h1>
CSS:
#main-title {
color: green;
}
ID selectors:
Starts with
#Should be unique on the page
Higher priority than class
Group Selector
Group selectors are used to style multiple elements at once.
h1, p {
color: purple;
}
This applies purple color to both <h1> and <p> elements.
Group Selectors:
Reduce repetition
Keep CSS cleaner
Descendant Selector
Descendant Selector targets elements inside other elements.
HTML:
<div>
<p>Inside div</p>
</div>
<p>Outside div</p>
CSS:
div p {
color: orange;
}
Only the paragraph inside the div becomes orange.
This selector reads as:
“All p elements inside div.”
Very powerful and commonly used.
Basic Selector Priority
Sometimes multiple selectors target the same element.
CSS stands for: Cascading Style Sheets
“Cascading” means styles can override each other.
CSS follows this basic order:
ID > Class > Element
Example:
p {
color: blue;
}
.highlight {
color: red;
}
#special {
color: green;
}
If an element has both class and ID:
<p id="special" class="highlight">Text</p>
The text will be green.
Because ID has higher priority.
You don’t need deep specificity rules yet - just remember this basic order.
Why Selectors Are the Foundation of CSS
Before you learn:
Flexbox
Grid
Animations
Responsive design
You must understand selectors.
Because every CSS rule starts like this:
selector {
property: value;
}
If the selector is wrong, the style will never apply.
Selectors are like the “address” part of a letter.
If the address is wrong, the letter (style) won’t reach the element.
Conclusion
CSS selectors are the foundation of styling.
They allow you to move
from:
“Make everything red”
To:
“Make this specific element red.”
CSS selectors are not just syntax.
They teach you:
How to think structurally
How to control design
How browsers interpret rules
How cascading works
When you understand selectors, CSS becomes structured, predictable, and powerful.
Master selectors - and BOOM, you control the design.
It will start feeling logical.
