CSS Selectors

Selectors are how CSS finds the exact HTML you want to style. Without a way to point at specific elements, every style would have to apply to the whole page at once, which obviously wouldn't work for a real site. CSS gives you several ways to select elements: by their tag name (every paragraph), by a class you add yourself (any element marked as a card), by a unique ID (one specific element), or by combining selectors to target elements based on where they sit in the page's structure. Getting comfortable with selectors is one of the biggest unlocks in CSS, since almost everything else builds on being able to precisely target what you want to style on a site like cookiescursor.com.

In this page:

Element Selectors
Class Selectors
ID Selectors
Universal and Grouped Selectors
Combinators (Descendant and Child)

Syntax

css

element { }         /* type */
.class-name { }     /* class */
#id-name { }        /* id */
* { }              /* all */
selector1, selector2 { }

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

css

<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

css

<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

css

<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

css

<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)

css

<style>
.card p {
  color: gray;
}
.card > span {
  color: blue;
}
</style>
<div class="card">
  <p>Descendant paragraph</p>
  <span>Direct child span</span>
</div>

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Syntax Next Lesson → CSS How To