You've written some HTML. Now you want to make it look good with CSS. But how do you tell CSS which elements to style?
That's where selectors come in.
Why Do We Need CSS Selectors?
Imagine you're in a classroom and you want to give instructions:
Without selectors:
"Everyone, stand up!"
With selectors:
"Students wearing red shirts, stand up!"
"Student named John, stand up!"
"Students in row 3, stand up!"
CSS selectors work the same way. They let you target specific HTML elements and apply styles to them.
Without selectors: You can't style anything
With selectors: You control exactly what gets styled
Basic HTML for Our Examples
Let's use this HTML throughout the blog:
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
<p class="highlight">This is highlighted.</p>
<p id="special">This is special.</p>
<div class="box">
<p>Paragraph inside box</p>
</div>
</body>
Now let's see how to select different parts.
1. Element Selector
The element selector targets all elements of a specific type.
Syntax:
tagname {
/* styles */
}
Example:
p {
color: blue;
}
What this does:
Targets ALL <p> elements and makes them blue.
Result:
- "This is a paragraph." → Blue
- "This is highlighted." → Blue
- "This is special." → Blue
- "Paragraph inside box" → Blue
Use when: You want to style all elements of one type.
More Examples
Style all headings:
h1 {
font-size: 32px;
color: darkblue;
}
Style all divs:
div {
background-color: lightgray;
padding: 10px;
}
2. Class Selector
The class selector targets elements with a specific class.
Syntax:
.classname {
/* styles */
}
Notice the dot (.) before the class name.
Example:
.highlight {
background-color: yellow;
}
What this does:
Targets only <p class="highlight"> and gives it a yellow background.
Result:
- "This is highlighted." → Yellow background
- Other paragraphs → No yellow background
Use when: You want to style specific elements that share a purpose or style.
Multiple Classes
An element can have multiple classes:
<p class="highlight bold">Text</p>
Target it:
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
Both styles apply!
Classes vs Elements
Element selector (all paragraphs):
p {
color: blue;
}
Every <p> becomes blue.
Class selector (specific paragraphs):
.highlight {
color: red;
}
Only <p class="highlight"> becomes red.
3. ID Selector
The ID selector targets a single unique element.
Syntax:
#idname {
/* styles */
}
Notice the hash (#) before the ID name.
Example:
#special {
font-size: 20px;
color: red;
}
What this does:
Targets only <p id="special"> and makes it red with larger text.
Result:
- "This is special." → Red, 20px font
- Other paragraphs → No change
Important: IDs should be unique. Only ONE element should have a specific ID.
Class vs ID
Class:
- Use for multiple elements
- Starts with
.
- Example:
class="button"
ID:
- Use for one unique element
- Starts with
#
- Example:
id="header"
HTML example:
<!-- Multiple elements can share a class -->
<button class="btn">Click</button>
<button class="btn">Submit</button>
<!-- Only one element should have an ID -->
<div id="main-content">...</div>
CSS:
.btn {
background-color: blue;
}
#main-content {
width: 80%;
}
4. Group Selectors
Group selectors let you apply the same styles to multiple selectors.
Syntax:
selector1, selector2, selector3 {
/* styles */
}
Use commas to separate selectors.
Example:
h1, h2, h3 {
color: navy;
font-family: Arial;
}
What this does:
All <h1>, <h2>, and <h3> elements get navy color and Arial font.
Another example:
p, .highlight, #special {
line-height: 1.5;
}
All paragraphs, elements with class "highlight", AND the element with id "special" get line-height of 1.5.
Use when: Multiple different selectors need the same styling.
5. Descendant Selectors
Descendant selectors target elements inside other elements.
Syntax:
parent child {
/* styles */
}
Use a space between selectors.
Example:
div p {
color: green;
}
What this does:
Targets <p> elements that are inside <div> elements.
Given this HTML:
<p>Outside div</p>
<div>
<p>Inside div</p>
</div>
Result:
- "Outside div" → Not green (not inside a div)
- "Inside div" → Green (inside a div)
More Examples
Target links inside navigation:
nav a {
color: white;
text-decoration: none;
}
Target paragraphs inside a specific class:
.box p {
font-size: 14px;
}
Deeper nesting:
div ul li {
list-style: square;
}
Targets <li> elements inside <ul> inside <div>.
Combining Selectors
You can combine different selector types for precision.
Class inside element:
div .highlight {
background-color: yellow;
}
Targets elements with class "highlight" inside <div>.
Element with class:
p.highlight {
color: red;
}
Targets <p> elements that have class "highlight" (no space between p and .highlight).
ID inside element:
section #special {
font-weight: bold;
}
Selector Priority (Specificity)
What happens if multiple selectors target the same element?
Simple rule: More specific selector wins.
Priority order (low to high):
- Element selectors (
p) - Class selectors (
.highlight) - ID selectors (
#special)
Example:
<p class="text" id="intro">Hello</p>
p {
color: blue;
}
.text {
color: green;
}
#intro {
color: red;
}
Result: Text is red because ID has highest priority.
Simple to remember:
- ID beats class
- Class beats element
- More specific beats less specific
Practical Examples
Example 1: Simple Blog Post
/* All paragraphs */
p {
line-height: 1.6;
color: #333;
}
/* Main heading */
h1 {
font-size: 36px;
color: #000;
}
/* Highlighted quotes */
.quote {
background-color: #f0f0f0;
border-left: 4px solid blue;
padding: 10px;
}
/* Author section */
#author {
font-style: italic;
color: gray;
}
Example 2: Navigation Menu
/* Style all nav links */
nav a {
color: white;
text-decoration: none;
padding: 10px;
}
/* Active link */
.active {
background-color: blue;
}
Example 3: Card Layout
/* All cards */
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
}
/* Card titles */
.card h2 {
color: #333;
margin-bottom: 10px;
}
/* Card paragraphs */
.card p {
color: #666;
line-height: 1.5;
}
Before and After Examples
HTML:
<h1>My Website</h1>
<p>Welcome to my site.</p>
<p class="important">This is important!</p>
Before CSS (no styling):
My Website
Welcome to my site.
This is important!
After CSS:
h1 {
color: blue;
font-size: 32px;
}
p {
color: gray;
}
.important {
color: red;
font-weight: bold;
}
Result:
- "My Website" → Blue, 32px
- "Welcome to my site." → Gray
- "This is important!" → Red, bold
Quick Reference
| Selector | Syntax | Example | What it targets |
|---|---|---|---|
| Element | tagname | p | All <p> elements |
| Class | .classname | .highlight | Elements with class="highlight" |
| ID | #idname | #header | Element with id="header" |
| Group | sel1, sel2 | h1, h2 | All h1 AND all h2 |
| Descendant | parent child | div p | <p> inside <div> |
Common Beginner Mistakes
1. Forgetting the dot for classes
/* Wrong */
highlight {
color: red;
}
/* Right */
.highlight {
color: red;
}
2. Forgetting the hash for IDs
/* Wrong */
header {
width: 100%;
}
/* Right */
#header {
width: 100%;
}
3. Using IDs for multiple elements
<!-- Wrong: Same ID used twice -->
<div id="box">Box 1</div>
<div id="box">Box 2</div>
<!-- Right: Use classes -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>
Summary
CSS Selectors = Ways to target HTML elements for styling
Main types:
Element →p(all paragraphs)
Class →.highlight(elements with that class)
ID →#special(one unique element)
Group →h1, h2, h3(multiple selectors)
Descendant →div p(p inside div)
Priority:
ID > Class > Element
Remember:
- Use
.for classes - Use
#for IDs - Use space for descendant selectors
- Use comma for group selectors
Selectors are the foundation of CSS. Master these, and you can style anything!