How to select HTML elements using different selector types
The difference between universal, element, class, and ID selectors
When to use each type of selector
How to combine selectors for more specific targeting
Best practices for writing maintainable CSS selectors
Introduction to CSS Selectors
CSS selectors are the foundation of styling web pages. They are patterns that tell the
browser which HTML elements should receive the styles you define. Think of selectors as
a way to point to specific elements on your page and say style this thing (or these things) like this.
Understanding selectors is crucial because they determine how specific, reusable, and
maintainable your CSS will be. In this lesson, we'll cover the most fundamental selector
types that you'll use in almost every stylesheet you write.
Universal Selector (*)
The universal selector matches every single element in your HTML document.
It's written as an asterisk (*) and is most commonly used for CSS resets
or applying box-sizing and t to all elements.
Syntax
* {
box-sizing: border-box;
}
When to Use It
The universal selector is powerful but should be used sparingly. Common use cases include:
Element selectors target all elements of a specific HTML tag type. For example,
p selects all paragraph elements, div selects all divs,
and h1 selects all level-1 headings.
Syntax
p {
color: black;
background-color: orange;
margin: 2rem;
}
<p>This paragraph will have the styles applied.</p>
<p>So will this one!</p>
<div>But this div will not.</div>
Rendered Result:
Class Selector (.)
Class selectors target elements with a specific
class attribute and begin with a dot (.). Unlike id values,
classes can be reused on multiple elements, making them incredibly versatile.
Syntax
.highlight {
background-color: yellow;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
<p class="highlight">This paragraph has the highlight class.</p>
<p>This paragraph has no class.</p>
<span class="highlight">Classes work on any element!</span>
Rendered Result:
Multiple Classes
Elements can have multiple classes separated by spaces. This is extremely useful
for composing styles:
ID selectors target a single, unique element with a specific id attribute.
They begin with a hash symbol (#). Each ID should be unique within a page.
Syntax
#intro {
font-size: 1.25rem;
font-weight: bold;
border-left: 4px solid blue;
padding-left: 1rem;
}
<p id="intro">This paragraph has a unique ID.</p>
Rendered Result:
Grouping Selectors
When you want to apply the same styles to multiple selectors, you can group them
together with commas. This keeps your CSS DRY (Don't Repeat Yourself) and easier
to maintain.
You can combine an element selector with a class selector (no space between them)
to target only elements of a specific type that have a particular class. This
provides more specificity than using the class alone.
Syntax
p.important {
background-color: #ffe6e6;
border: 2px solid red;
padding: 1rem;
border-radius: 0.25rem;
}
<p class="important">This paragraph has the important class.</p>
<div class="important">This div also has the class, but won't be styled.</div>
Rendered Result
When to Use This
Combining element and class selectors is useful when you want different styling
for the same class name on different element types.
Different selectors have different power used to determine which styles apply. This is what is called specificity. Here's the specificity ranking from lowest to highest for what we have covered so far:
Universal selector (*) - Specificity: 0
Element selectors (p, div, h1) - Specificity: 1
Class selectors (.highlight) - Specificity: 10
ID selectors (#intro) - Specificity: 100
We'll dive much deeper into specificity in Lesson 06, but for now, just remember
that IDs are more specific than classes, and classes are more specific than elements.