CSS Selectors 101

Source: Dev.to

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

<div>
  <h2>Welcome</h2>

  <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>
</div>

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 their text 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 every element of a particular type.

More Examples

Style all headings

h1 {
  font-size: 32px;
  color: darkblue;
}

Style all <div> elements

div {
  background-color: lightgray;
  padding: 10px;
}

2. Class Selector

The class selector targets elements that share a specific class.

Syntax

.classname {
  /* styles */
}

(Note the dot . before the class name.)

Example

.highlight {
  background-color: yellow;
}

What this does: Only the element with class="highlight" receives a yellow background.

Result

• “This is highlighted.” → Yellow background
• Other paragraphs → No yellow background

Use when: You want to style a group of elements that share a purpose or visual style.

Multiple Classes

An element can have more than one class:

<p class="highlight bold">Text</p>

Target each class

.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}

Both styles apply to the same element.

Classes vs. Elements

Element selector (all paragraphs)

p {
  color: blue;
}

Every <p> becomes blue.

Class selector (specific paragraphs)

.highlight {
  color: red;
}

Only elements with class="highlight" become red.

3. ID Selector

The ID selector targets a single, unique element.

Syntax

#idname {
  /* styles */
}

(Note the hash # before the ID name.)

Example

#special {
  font-size: 20px;
  color: red;
}

What this does: Only the element with id="special" becomes red with a larger font size.

Result

• “This is special.” → Red, 20 px font
• Other paragraphs → No change

Important: IDs must be unique—only one element should have a given ID.

Class vs. ID

HTML example

<button class="btn">Click</button>
<button id="main-content">Submit</button>

CSS

.btn {
  background-color: blue;
}

#main-content {
  width: 80%;
}

4. Group Selectors

Group selectors let you apply the same styles to several selectors at once.

Syntax

selector1, selector2, selector3 {
  /* styles */
}

(Separate selectors with commas.)

Example

h1, h2, h3 {
  color: navy;
  font-family: Arial;
}

All <h1>, <h2>, and <h3> elements get navy text and the Arial font.

Another example

p, .highlight, #special {
  line-height: 1.5;
}

All paragraphs, elements with class highlight, and the element with ID special receive a line‑height of 1.5.

Use when: Different selectors need identical styling.

5. Descendant Selectors

Descendant selectors target elements that are nested inside other elements.

Syntax

parent child {
  /* styles */
}

(A space between the selectors indicates “child of”.)

Example

div p {
  color: green;
}

What this does: Selects <p> elements that are inside a <div>.

Given this HTML

<div>
  <p>Outside div</p>
</div>

<div class="box">
  <p>Inside div</p>
</div>

• The first <p> (outside the <div>) is not affected.
• The second <p> (inside the <div>) becomes green.

Recap

Understanding and mastering these selectors gives you precise control over how your HTML looks, making your CSS both powerful and maintainable. Happy styling!

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

Simple rule: The more specific selector wins.

Priority order (low → high)

1. Element selectors (p)
2. Class selectors (.highlight)
3. ID selectors (#special)

Example

<p id="intro" class="text">Hello</p>

p {
  color: blue;
}
.text {
  color: green;
}
#intro {
  color: red;
}

Result: The text is red because the ID selector has the highest priority.

Quick mnemonic

• 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, 32 px
• “Welcome to my site.” → Gray
• “This is important!” → Red, bold

Quick Reference

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

<div id="box">Box 1</div>
<div id="box">Box 2</div>

IDs must be unique; use classes for repeated elements.

Summary

• CSS Selectors are the 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 a space for descendant selectors.
  • Use a comma for group selectors.

Selectors are the foundation of CSS. Master them, and you can style anything!