CSS Selectors 101: Targeting Elements with Precision
Learn how element, class, ID, group and descendant selectors target HTML, with examples and an introduction to selector priority.
On this page 21
Imagine you’ve just built a house. The structure is done — that’s your HTML. Now you want:
- the kitchen painted blue
- the bedroom carpeted
- the bathroom tiled
You wouldn’t just splash paint on the whole house and hope the right rooms get painted. You give precise instructions.
In CSS, selectors are those instructions. They tell the browser:
“Apply this style… to that specific piece of HTML.”
Without selectors, CSS is just a list of styles with nowhere to go. Once you understand selectors, CSS suddenly starts to feel logical and powerful.
The Real-World Analogy
Think of your HTML page like a crowded room. You can call out to people at different levels of specificity:
- “Hey, humans!” → broad
- “Hey, everyone wearing red shirts!” → more specific
- “Hey, Bob Smith with ID #42!” → extremely specific
CSS selectors behave the same way. Let’s go from broad → precise.
1. Element Selector (The Broad Brush)
Targets every instance of an HTML tag.
This is your “Hey, humans!” selector.
HTML
<h1>Welcome to My Blog</h1>
<p>This is an introductory paragraph.</p>
<div>
<p>This is another paragraph inside a div.</p>
</div>CSS
p {
color: #333;
font-size: 18px;
}Result: Every <p> on the page gets this styling — no matter where it lives.
2. Class Selector (The Flexible Group)
Classes define groups of elements. This is your “Everyone wearing a red shirt!” selector.
Use a dot (.) in CSS and class="" in HTML.
HTML
<p>This is normal.</p>
<p class="highlight">This is important!</p>
<ul>
<li>Normal item</li>
<li class="highlight">Important item</li>
</ul>CSS
.highlight {
background-color: yellow;
font-weight: bold;
}Result: Only the elements with class="highlight" get styled — even across different tags.
Classes are reusable.
You can use the same class on 1 element or 100.
3. ID Selector (The Laser Beam)
Targets one unique element on the page. This is your “Bob Smith with ID #42!” selector.
Use a hash (#) in CSS and id="" in HTML.
HTML
<footer id="main-footer">
<p>Copyright 2023.</p>
</footer>CSS
#main-footer {
background: black;
color: white;
padding: 20px;
}Rule: An ID must only be used once on a page.
Class vs ID (Quick Comparison)
| Feature | Class (.) | ID (#) |
|---|---|---|
| Analogy | A club membership | A unique passport number |
| Reusability | Many elements | Only one element |
| Specificity | Medium | High |
4. Group Selectors (Write Less, Style More)
Sometimes two or more elements share the same style. Instead of writing multiple rules, group them with a comma.
CSS
h1, h2 {
color: blue;
font-family: sans-serif;
}This keeps your stylesheet clean and efficient.
5. Descendant Selectors (Target Only What’s Inside)
This selector targets an element only if it is inside another element.
Use a space between selectors:
parent childHTML
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<p>Read more in our <a href="#">archive</a>.</p>CSS
nav a {
color: red;
text-decoration: none;
}Result: Only the links inside the nav change. The link in the paragraph stays default.
This is one of the most powerful concepts in CSS.
Selector Priority: Who Wins? (Very High-Level)
When multiple selectors target the same element, CSS uses a specificity score.
Example:
HTML
<p class="special" id="very-special">Hello World</p>CSS
p { color: black; } /* element */
.special { color: blue; } /* class */
#very-special { color: red; } /* id */Which color wins?
Red.
Because:
- ID selectors are strongest
- Class selectors are next
- Element selectors are weakest
Think of it like military ranks:
General (ID) > Captain (Class) > Soldier (Element)
Comments 00
Got something to say? Leave a comment.
Join the discussion ↗