CSS Selectors 101: Targeting Elements with Precision
You've built the skeleton of your webpage with HTML. Every heading, paragraph, image, and link is in place. But right now, everything looks plain—black text on a white background, default fonts, no color, no personality.
This is where CSS comes in. But here's the thing: CSS can't style your entire page all at once. You need to tell it exactly which elements to style. Do you want to change all paragraphs? Just one specific paragraph? Every element with a certain class?
That's what CSS selectors do. They're your way of pointing at elements and saying, "This one. Style this one."
Why CSS Selectors Are Needed
Imagine you're teaching a classroom full of students. Sometimes you want to address everyone at once: "Class, please open your books." Other times, you need to speak to a specific group: "Everyone wearing blue, please stand up." And sometimes, you need to call on one particular person: "Sarah, can you answer this question?"
CSS selectors work the same way. They let you target:
All elements of a certain type (like all paragraphs)
Groups of elements (like all elements with a specific class)
One unique element (using an ID)
Elements in specific locations (like paragraphs inside a div)
Without selectors, you couldn't control where your styles apply. You'd have no way to make your headings big and bold while keeping your paragraphs normal-sized. Selectors are the foundation of everything in CSS.
Element Selector: Styling All Elements of One Type
The simplest selector is the element selector. You just use the HTML tag name, and CSS applies your styles to every instance of that element on the page.
Syntax:
css
elementname {
property: value;
}
Example:
css
p {
color: blue;
font-size: 16px;
}
This selects every single <p> tag on your page and makes the text blue with a font size of 16 pixels.
Let's say you have this HTML:
html
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
When you apply the CSS above, all three paragraphs turn blue. You didn't have to target each one individually—the element selector grabbed them all.
More examples:
css
h1 {
color: darkgreen;
font-size: 36px;
}
a {
color: purple;
text-decoration: none;
}
img {
width: 100%;
border-radius: 8px;
}
Element selectors are great when you want consistent styling across all instances of an element. Every heading should be the same size, every link should be the same color, every image should have rounded corners.
When to use element selectors:
Setting default styles for your entire site
Making all instances of an element look the same
Creating baseline typography (font sizes, colors, spacing)
Class Selector: Styling Groups of Elements
What if you don't want to style every paragraph the same way? Maybe you have regular paragraphs and special "highlight" paragraphs that should stand out.
This is where classes come in. A class is like a label you attach to HTML elements, and CSS can target all elements with that label.
In HTML, you add a class like this:
html
<p class="highlight">This paragraph is special.</p>
<p>This is a normal paragraph.</p>
<p class="highlight">This is also special.</p>
In CSS, you select classes with a dot . followed by the class name:
css
.highlight {
background-color: yellow;
font-weight: bold;
}
Now only the paragraphs with class="highlight" get the yellow background and bold text. The regular paragraph stays normal.
Important: Class names are reusable. You can use the same class on as many elements as you want, even different types of elements:
html
<p class="warning">This paragraph has a warning.</p>
<div class="warning">This div also has a warning.</div>
<span class="warning">Even this span.</span>
css
.warning {
color: red;
border: 2px solid red;
padding: 10px;
}
All three elements—paragraph, div, and span—will have red text, a red border, and padding, because they all share the warning class.
Multiple classes on one element:
You can give an element multiple classes by separating them with spaces:
html
<p class="highlight warning">This paragraph is both highlighted and a warning.</p>
css
.highlight {
background-color: yellow;
}
.warning {
color: red;
border: 2px solid red;
}
The paragraph gets styles from both classes—yellow background from highlight and red text and border from warning.
When to use class selectors:
Styling specific groups of elements
Creating reusable styles (buttons, cards, alerts)
When you need the same style on different types of elements
ID Selector: Styling One Unique Element
Sometimes you have one element on your page that's truly unique and needs special styling. Maybe it's your page header, or a specific section, or a unique hero banner.
For these cases, you use an ID. An ID should only appear once per page—it's like a Social Security number for your HTML element.
In HTML:
html
<header id="main-header">Welcome to My Website</header>
In CSS, you select IDs with a hash # followed by the ID name:
css
#main-header {
background-color: navy;
color: white;
padding: 20px;
text-align: center;
}
Only the element with id="main-header" gets these styles.
The golden rule of IDs: Each ID should be used only once per page. If you find yourself wanting to use the same ID on multiple elements, use a class instead.
Example of proper ID usage:
html
<div id="hero">
<h1>Welcome</h1>
<p>This is our hero section</p>
</div>
<div id="about">
<h2>About Us</h2>
<p>Information about our company</p>
</div>
<div id="contact">
<h2>Contact</h2>
<p>Get in touch with us</p>
</div>
css
#hero {
background-image: url('hero-bg.jpg');
height: 500px;
}
#about {
background-color: lightgray;
padding: 50px;
}
#contact {
background-color: white;
padding: 30px;
}
Each section has a unique ID and unique styling.
When to use ID selectors:
One-of-a-kind elements on the page
Major page sections (header, footer, main navigation)
Elements you need to link to or target with JavaScript
Pro tip: In modern CSS, many developers use classes for almost everything and reserve IDs primarily for JavaScript or anchor links. Both approaches work, but it's good to know the difference.
Group Selectors: Styling Multiple Elements at Once
What if you want to apply the same styles to multiple different elements? You could write separate rules for each one, but that's repetitive.
Group selectors let you select multiple elements with a single rule by separating them with commas.
Instead of this:
css
h1 {
color: darkblue;
font-family: Arial, sans-serif;
}
h2 {
color: darkblue;
font-family: Arial, sans-serif;
}
h3 {
color: darkblue;
font-family: Arial, sans-serif;
}
Write this:
css
h1, h2, h3 {
color: darkblue;
font-family: Arial, sans-serif;
}
Much cleaner. All three heading types get the same color and font.
You can group any selectors—elements, classes, IDs:
css
.highlight, .warning, #special-note {
border: 2px solid;
padding: 15px;
margin: 10px 0;
}
Now elements with the highlight class, the warning class, or the special-note ID all get the same border, padding, and margin.
When to use group selectors:
Multiple elements need identical styling
Reducing repetition in your CSS
Setting consistent styles across different element types
Descendant Selectors: Targeting Elements in Specific Places
So far, we've selected elements based on what they are (element selector), what class they have (class selector), or their unique ID. But sometimes you need to be more specific about where an element is located.
Descendant selectors let you target elements that are inside other elements.
Syntax: Separate selectors with a space
css
parent descendant {
property: value;
}
Example:
Let's say you have links throughout your page, but you want links inside your navigation to look different from regular links.
HTML:
html
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<p>Visit our <a href="#">homepage</a> for more information.</p>
CSS:
css
/* All links are purple by default */
a {
color: purple;
}
/* But links inside nav are white */
nav a {
color: white;
font-weight: bold;
}
The descendant selector nav a targets only the links inside the <nav> element, leaving the link in the paragraph purple.
Another example with classes:
html
<div class="sidebar">
<p>This is sidebar text.</p>
<p>Another sidebar paragraph.</p>
</div>
<p>This is regular body text.</p>
css
/* Only paragraphs inside .sidebar get styled */
.sidebar p {
background-color: lightgray;
font-size: 14px;
padding: 10px;
}
The paragraphs inside .sidebar get the gray background and smaller font, but the regular paragraph outside doesn't.
Descendant selectors can go multiple levels deep:
css
article div p {
line-height: 1.6;
}
This targets paragraphs inside divs inside articles. Be careful not to make your selectors too specific, though—it can make your CSS harder to maintain.
When to use descendant selectors:
Elements need different styles based on location
Styling navigation links differently from content links
Overriding default styles in specific sections
Basic Selector Priority: What Happens When Styles Conflict?
Here's a situation you'll run into: you've styled an element in multiple ways, and the browser has to decide which style wins.
html
<p id="intro" class="highlight">This paragraph has both an ID and a class.</p>
css
p {
color: blue;
}
.highlight {
color: green;
}
#intro {
color: red;
}
What color will the paragraph be? The browser follows a priority system called specificity.
The basic hierarchy (from weakest to strongest):
Element selectors (weakest)
Class selectors (medium)
ID selectors (strongest)
In our example above, the paragraph will be red because the ID selector #intro is the most specific.
Think of it as points:
Element selector = 1 point
Class selector = 10 points
ID selector = 100 points
The selector with the most points wins.
Another example:
css
/* 1 point */
p {
color: blue;
}
/* 11 points (1 for p + 10 for .highlight) */
p.highlight {
color: green;
}
The paragraph with class="highlight" will be green because p.highlight has more specificity (11 points) than just p (1 point).
Don't worry too much about the math. Just remember this general rule:
IDs beat classes. Classes beat elements.
When in doubt, use classes for most of your styling. They're specific enough to target what you need but flexible enough to reuse. Save IDs for truly unique elements.
Before and After: Seeing Selectors in Action
Let's see the difference selectors make with a real example.
HTML (before CSS):
html
<header id="site-header">
<h1>My Portfolio</h1>
<nav>
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<p class="intro">Welcome to my portfolio website.</p>
<p>Here you'll find information about my work.</p>
<p class="highlight">Check out my latest project!</p>
</main>
Without CSS: Black text on white background, default fonts, no spacing, everything squished together.
With CSS selectors:
css
/* Element selector - all paragraphs get base styling */
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 15px;
}
/* ID selector - unique header styling */
#site-header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Descendant selector - links inside nav */
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
/* Class selector - special intro paragraph */
.intro {
font-size: 20px;
font-weight: bold;
color: #555;
}
/* Class selector - highlighted paragraph */
.highlight {
background-color: yellow;
padding: 10px;
border-left: 4px solid orange;
}
Now: Dark header with white text, styled navigation links, larger intro text, highlighted call-to-action paragraph. Same HTML, completely different look—all thanks to selectors.
Selectors Are Your Foundation
Everything you do in CSS starts with selectors. Before you can change colors, adjust layouts, or create animations, you need to select the elements you want to style.
Master these basics:
Element selectors for styling all elements of one type
Class selectors for reusable groups of styles
ID selectors for unique elements
Group selectors to avoid repetition
Descendant selectors for location-specific styling
These five selector types will handle 90% of your everyday CSS needs. There are more advanced selectors (pseudo-classes like :hover, attribute selectors, child selectors), but don't worry about those yet. Get comfortable with these basics first.
Try It Yourself
The best way to learn selectors is to practice. Open your code editor and create a simple HTML file with various elements—headings, paragraphs, divs, lists. Add some classes and IDs.
Then open a CSS file and experiment:
Turn all headings blue
Give paragraphs with the class "note" a gray background
Style links inside your navigation differently
Make one specific element stand out with an ID
Watch how each selector changes different parts of your page. Play around. Break things. See what happens when you use the wrong selector or misspell a class name.
That hands-on experience will teach you more than any article ever could.
Summary
CSS selectors let you target specific HTML elements to apply styles.
Element selector: p { } targets all paragraphs
Class selector: .highlight { } targets elements with that class
ID selector: #header { } targets the unique element with that ID
Group selector: h1, h2, h3 { } targets multiple elements at once
Descendant selector: nav a { } targets links inside navigation
Priority: ID selectors are strongest, then classes, then elements.
Start simple. Use element selectors for base styles, classes for reusable components, and IDs sparingly for truly unique elements. As you build more pages, you'll develop an intuition for which selector to use when.
Selectors are your precision tools. The better you understand them, the more control you have over your designs.
