CSS Selectors
In this page:
Element Selectors
An element selector targets every instance of a given HTML tag on the page, simply by writing the tag name with no dot or hash in front of it. Because element selectors are so broad, they're best used for base styling rather than one-off exceptions.
Note: Element selectors are great for broad, page-wide defaults, like setting a base font on every paragraph.
Warning: An element selector affects every matching tag on the whole page, which can have wider effects than you intend on a large site.
Example: Element Selectors
<style>
p {
font-family: sans-serif;
}
</style>
<p>Every paragraph on the page gets this style</p>Class Selectors
A class selector starts with a dot and matches any element carrying that class in its class attribute. The same class can be reused on as many elements as you like. Classes are the most common selector type in real projects precisely because of this reusability across many elements.
Note: Reach for class selectors first for anything reusable, like a card, a button, or a badge that appears in multiple places.
Warning: An element can carry multiple classes at once, separated by spaces, which sometimes surprises people expecting only one class per element.
Example: Class Selectors
<style>
.card {
border: 1px solid #ccc;
}
</style>
<div class="card">Card 1</div>
<div class="card">Card 2</div>ID Selectors
An ID selector starts with a hash symbol and matches the one element on the page carrying that exact ID. IDs are meant to be unique, unlike classes, which can repeat. Because of this uniqueness rule, IDs are best reserved for page anchors and JavaScript hooks rather than everyday styling.
Note: Save IDs for elements that truly are one-of-a-kind on the page, like a main navigation bar or a specific unique widget.
Warning: ID selectors carry more weight than class selectors when styles conflict, which can make them harder to override later.
Example: ID Selectors
<style>
#main-nav {
background: navy;
}
</style>
<nav id="main-nav">Navigation</nav>Universal and Grouped Selectors
The universal selector (a single asterisk) matches every element on the page, and grouped selectors combine several selectors with commas so they all share one declaration block. Combining both, like '.a, .b, #c', is a common way to keep a stylesheet compact when several unrelated elements need identical treatment.
Note: The universal selector is handy for quick resets, like removing default margin and padding before you build your own spacing system.
Warning: Using the universal selector for anything beyond simple resets can accidentally style elements you never meant to touch.
Example: Universal and Grouped Selectors
<style>
* {
margin: 0;
padding: 0;
}
.a, .b, #c {
color: red;
}
</style>
<div class="a">A</div>
<div class="b">B</div>
<div id="c">C</div>Combinators (Descendant and Child)
Combinators describe relationships between selectors. A space between two selectors means 'any descendant', while a greater-than sign means 'a direct child only'. Understanding this distinction is essential for controlling exactly how deep a style should reach into nested markup.
Note: Use a direct child combinator when you specifically want to avoid accidentally styling deeply nested elements further down the tree.
Warning: A descendant selector (just a space) can match elements many levels deep, not only the immediate children you might be picturing.
Example: Combinators (Descendant and Child)
<style>
.card p {
color: gray;
}
.card > span {
color: blue;
}
</style>
<div class="card">
<p>Descendant paragraph</p>
<span>Direct child span</span>
</div>- Confusing a class selector (starting with a dot) with an ID selector (starting with a hash).
- Giving multiple elements the same ID, which is invalid since IDs must be unique on a page.
- Writing an overly specific selector when a simple class selector would have worked just as well.
- Element selectors target every instance of a tag, like every paragraph or every button.
- Class selectors (with a dot) can be reused on many elements; ID selectors (with a hash) should be unique.
- Selectors can be combined and grouped to target elements more precisely or apply one rule to several elements at once.
All standard CSS selectors covered here are supported by every modern browser.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: