CSS Selectors Explained
CSS Selectors
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:
Read selector
Find matching elements
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:
