CSS Selectors 101: Targeting Elements with Precision
A practical guide to selecting, styling, and controlling HTML elements
What Are CSS Selectors?
Once you have designed the webpage layout using HTML ,the next question is:
How do you choose which elements to style?
Suppose you want color paragraph blue, heading red , footer pink. Terrible taste!
So how are you going to call these elements out ?
That’s exactly what CSS selectors are for.
In simple terms:
CSS selectors are patterns used to select HTML elements so you can apply styles to them.
Visualize and think of CSS as giving instructions like:
Make this text blue
Increase the size of that heading
Add spacing around these sections
But before applying styles, CSS needs to know which elements you’re talking about.Only after you have selected the elements and applied styling can the browser render them on the viewport correctly. Selectors answer that question.
Trying to understand CSS Selectors in a better way:
Imagine you want to send a message.
You can address:
Everyone person in a city
People living in one building
People living on the 3rd floor
People wearing a red shirt
CSS selectors work the same way. They work on the principle of SPECIFICITY!!
Types of CSS Selectors are :
Element selector
Class selector
ID selector
Group selectors
Descendant selectors
Basic selector priority (very high level)
Element Selector
The element selector is the most basic and beginner-friendly CSS selector.
It selects all HTML elements of a given type and applies the same styles to each of them as defined.
This is just like sending a message to all people in the city . LEAST SPECIFIC
In simple terms:
An element selector targets elements by their tag name.
How to use Element Selectors ?
You first write the name of the HTML tag directly in your CSS.
Then apply the required styling to the selected tag.
Syntax
element {
property: value;
}
Element Selector in use
p {
color: blue;
}
This means:
“Make all
<p>(paragraph) elements blue.”
Every paragraph on the page will be affected.
Example
<body>
<h1>Main Heading</h1>
<p>Paragraph 1 </p>
<div>This is a div</div>
<span>This is a span</span>
</body>
*{
background-color: black;
}
h1{
color: orange;
}
p{
color: purple;
}
div{
color: red;
}
span{
color: green;
}
Think of an element selector like making an announcement:
“All students, please stand up.”
That’s exactly how element selectors work:
<h1>→ all headings<p>→ all paragraphs<a>→ all links
Common Use Cases
Element selectors are commonly used to:
Set global styles
Maintain consistency
Define base typography
Example:
body {
font-family: Arial, sans-serif;
}
h1 {
color: black;
}
a {
text-decoration: none;
}
Element selectors affect all elements of that type
They are less specific than class or ID selectors
They’re best for general styling, not fine-grained control
If you need to style one specific paragraph, an element selector is not the right choice.
If we compare
Element selector → styles all instances of that tag present in the codebase.
Class selector → styles a group you choose.
ID selector → styles one unique element.
Class Selector
This selector calls out a specific group of tags . This selector is more specific than Element selector.
For example:
<body>
<h1 class=border>Main Heading</h1>
<p>Paragraph 1 </p>
<div class=border>This is a div</div>
<span>This is a span</span>
</body>
.border{
border: 2px solid red;
}
The basic idea is to put multiple tags under an umbrella of class.
Classes are defined by
.border —>syntax in CSS files
class=”border” —> defining classes to tags in HTML
You can add multiple classes to a single element .
<p class="highlight bold">Important text</p>Here, the paragraph gets highlighted with the color set in the CSS file, and the text turns bold.
These selectors are used when you want to create styling groups which are going to be reused in the project.
The workflow
Create a class once,
Apply it to multiple elements.
This is the most common selector in CSS.
It is a considered a good practice to use descriptive names such as :
.card,.button,.container,.error-messagerather than.class1, .class2, .classabc
Analogy:
“Everyone wearing a red shirt, please gather here.”
ID Selector
This is the most specific CSS selector . Like calling out a single person by name.
#font{
font-family: Tahoma;
font-size: 50px;
}
This selects:
<body>
<h1 >Main Heading</h1>
<p id=font>Paragraph 1 </p>
<div >This is a div</div>
<span>This is a span</span>
</body>
The syntax of this selector is similar to class but instead of using
.we use#.Here you don’t group element and apply this styling , but target a specific tag .
IDs must be unique. Only one element per page should have a specific ID.
You can use ids for or unique page elements such as
The main header.
The navigation bar.
The footer.
Things that appear once per page.
So when should you use id and class?
| Classes are used for | IDs are used for |
| When Multiple elements need the style | Targeting a single element |
| Style is reusable | Element is unique on the page |
.button, .card, .alert | #header, #main, #footer |
Good practice: Use classes most of the time. IDs are mainly for JavaScript targeting or page anchors. In CSS, classes are more flexible.
Analogy:
“Arjun please come here.”
Group Selectors
Till now we have targeted the tags either individually or by using classes and ids.
You can group all the tags you need to style using this Group selector.
It lets you apply the same CSS rules to multiple elements by listing their selectors and separating them with commas.
Syntax
selector1, selector2, selector3 {
property: value;
}
Example
Instead of writing this
h1 {
color: #333;
}
h2 {
color: #333;
}
p {
color: #333;
}
You can write this
h1, h2, p {
color: #333;
}
Same result.
Cleaner code.
Less repetition.
Benefits:
Reduces duplicate code —> redundancy
Makes styles easier to maintain
Keeps your CSS file shorter and cleaner —>increases code quality
Helps avoid mistakes when updating styles later
Do you know you can group different types of selectors
Mixing classes, IDs, and elements together is one advantage of group selectors.
h1, .highlight, #main-title {
font-weight: bold;
}
This applies font-weight: bold to:
All
<h1>elementsAny element with class
.highlightThe element with ID
main-title
When Should You Use Group Selectors?
1. When multiple elements share the same style
2. When you notice copy-pasted CSS
3. When building consistent UI components
It’s like announcing:
“Everyone wearing a red shirt, everyone named Abhinav, and the team leader please stand up.”
Descendant Selector
What if you only want to style h2 inside a specific div?
A descendant selector targets elements that are inside another element, no matter how deeply nested they are. These selectors are based on parent-children relationships.
Syntax
ancestor descendant {
property: value;
}
The first selector is the parent (ancestor)
The second selector is the child (descendant)
There is a space between them (this space is very important!)
HTML
<body>
<h1>Main Heading</h1>
<p>Paragraph 1 </p>
<div>This is a div</div>
<span>This is a span</span>
</body>
CSS
div p {
color: blue;
}
Result
Paragraph inside the
div→ blueParagraph outside the
div→ unchanged
It doesn’t matter if the <p> is:
directly inside the div
inside a section
inside a table
inside multiple layers
As long as it’s somewhere inside the div, it gets styled.
Translation:
“Style all
<p>elements that are inside a<div>.”
Basic Selector Priority in CSS (Very High Level)
Have you ever written CSS and thought:
“Why is this style not applying?”
Welcome to selector priority 😄
CSS stands for Cascading Style Sheets — and cascading means when multiple rules apply, CSS must decide which one wins.
That decision is based on priority.
Think of Selector Priority Like Authority Levels 👮♂️
Imagine a workplace:
Intern – low authority
Manager – more authority
CEO – highest authority
If all three give instructions, the CEO wins.
CSS works the same way.
Specificity in CSS
What if all the selectors are targeting a single tag? Which one will overwrite the another.
Let’s understand the priority of these selectors. The VVIP selector and an ordinary common selector.
From lowest to highest priority:
Element selectors (
p,div,h1)Class selectors (
.card,.title)ID selectors (
#header)Inline styles (
style="")!important
Let’s understand with examples
Examples
HTML
<p id="text" class="message">Hello CSS</p>
CSS
p {
color: blue;
}
.message {
color: green;
}
#text {
color: red;
}
What Color Is the Text in the p tag?
Red, ID succeeds over class and element tag.
The strongest selector wins.
Inline Styles Beat Almost Everything
<p style="color: purple;">Hello</p>
Even if your CSS says:
p {
color: blue;
}
#id{
color:green
}
The text will be purple , ignoring all the remaining CSS
Inline styles are like:
“The instruction written directly on the element.”
!important
No one can beat this selector. This is the ultimate selector or the VVVVIP amongst all of them.
p {
color: orange !important;
}
!important overrides almost everything and should be used only as a last resort.
Think of it as:
Pulling the fire alarm instead of opening a door.
Order Also Matters (When Priority Is Equal)
If two selectors have the same priority, the one written later wins.
p {
color: blue;
}
p {
color: green;
}
The text will be green.CSS reads top to bottom.
Tips for Beginner
Do not overcomplicate CSS. Keep it simple and clean.
Usually
Prefer classes for most styling
Avoid overusing IDs
Don’t rely on
!important
One-Line Summary
CSS selectors are the addressing system of the web they let you choose exactly which HTML elements should receive specific styles.
The more specific the selector, the higher its priority.
Once you understand selectors, CSS starts to feel logical instead of confusing.
