CSS Selectors 101: Targeting Elements with Precision
Why CSS selectors are needed
HTML creates elements on a page, but CSS needs a way to choose which elements to style.
A browser looks at a webpage and asks:
“Which elements should I apply this style to?”
CSS selectors are the answer to that question.
So, selectors are simply:
Ways to choose elements on a webpage
Without selectors, CSS would not know where to apply styles.
Think of selectors like addressing people
Imagine you want to send a message.
You can address:
everyone in a room
people wearing blue shirts
one specific person by name
CSS selectors work the same way.
Element selector
The element selector targets all elements of a given type.
Example idea:
Target all paragraphs
Target all headings
Meaning:
“Apply this style to every element of this type”
This is the broadest and simplest way to select elements.
Use element selectors when:
you want consistent styling everywhere
all elements should look the same
Class selector
A class selector targets elements that share a common label.
Think of a class as:
“People wearing the same badge”
Multiple elements can have the same class.
Meaning:
“Style only the elements that belong to this group”
Class selectors are:
reusable
flexible
the most commonly used selectors in CSS
ID selector
An ID selector targets one unique element.
Think of an ID as:
“A person’s unique name or roll number”
Rules to remember:
an ID should be used only once per page
it selects exactly one element
Use ID selectors when:
the element is unique
you want to target it very specifically
Group selectors
Sometimes you want to apply the same style to multiple selectors.
Group selectors allow you to:
“Write the style once and apply it to many”
This avoids repetition and keeps CSS clean.
Think:
“Send the same message to multiple groups at once”
Descendant selectors
A descendant selector targets elements inside other elements.
Meaning:
“Select this element only when it appears inside that element”
This is useful when:
the same element appears in different places
but should look different depending on context
Think:
“Select people only inside a specific room”
Basic selector priority (very high level)
When multiple selectors target the same element, CSS needs to decide which one wins.
At a very high level, priority works like this:
ID selector (most specific)
Class selector
Element selector (least specific)
Simple idea:
More specific selectors override more general ones
You don’t need to memorize rules now — just remember:
CSS prefers specificity.
Before and after idea (conceptual)
Before selectors:
No way to choose elements
Styling would apply everywhere
After selectors:
Styles apply exactly where intended
Pages become structured and manageable
Why selectors are the foundation of CSS
Selectors are the entry point of CSS.
CSS always follows this pattern:
Select elements
Apply styles
If you understand selectors:
CSS becomes predictable
debugging becomes easier
layouts make more sense