CSS Selectors 101: Targeting Elements with Precision
Why CSS selectors are needed
CSS is not just to add color on text , fonts and layout .
Before apply style we need to confirm on which elements we add style that’s where CSS selector comes .
Why CSS Selectors Are Needed
A webpage contain many HTML elements:
headings
paragraphs
buttons
images
CSS selector is work like address which tell to browser hey where apply this style , these elements not to others .
Without selector , CSS never be know where i need to apply CSS.
Think of Selectors Like Addressing People 🏠
Element selector → call everyone with the same role
Class selector → call people wearing the same badge
ID selector → call one specific person by name
CSS work on same way .
Element Selector
The Element selctor target all elements which has same type.
Example
p {
color: blue;
}
What it does
Targets all
<p>elementsVery broad
Useful for base styling
Class Selector
The class selector targets elements with a specific class name.
Example
.highlight {
background-color: yellow;
}
<p class="highlight">Important text</p>
What it does
Targets multiple elements
Reusable
Most commonly used selector
ID Selector
The ID selector targets one unique element.
Example
#main-title {
font-size: 32px;
}
<h1 id="main-title">Welcome</h1>
Rules to remember
IDs must be unique
Used for one specific element
not be reused like classes
Group Selector
The group selector applies the same styles to multiple selectors.
Example
h1, h2, p {
font-family: Arial, sans-serif;
}
What it does
Reduces repetition
Keeps CSS clean and readable
Descendant Selector
The descendant selector targets elements inside other elements.
Example
div p {
color: green;
}
What it does
Targets
<p>elements inside<div>Helps style content based on structure
Basic Selector Priority (Very High Level)
When multiple selectors target the same element, priority matters.
At a basic level:
Element < Class < ID
Element selector → lowest priority
Class selector → medium priority
ID selector → highest priority
This is why IDs override classes, and classes override elements.
Before & After Styling Example
HTML (Before)
<p>Hello World</p>
CSS (After)
p {
color: red;
}
Result: The paragraph text becomes red.
Selectors decide what gets styled.
