CSS Selectors: How to Target HTML Elements

Learn CSS Selectors. Understand element, class, ID, universal, grouping, attribute selectors, and structural combinators.

Introduction

Imagine you are writing a letter to a corporate office with 500 employees. If you address the envelope generally to "VSNEXOS", everyone gets it (Universal). If you address it to "Engineering Department", only engineers read it (Class). If you address it specifically to the "CEO John Doe", only one person reads it (ID).

In CSS, Selectors work exactly like these address tags. They define which HTML elements on the page will receive specific styling rules. Choosing the correct selector ensures your stylesheet remains clean, performant, and easy to update.

What You Will Learn

The five main categories of CSS Selectors.
The differences between Element, Class, and ID selectors.
How to target elements based on hierarchy (Combinators).
How to structure clean, maintainable selectors.

Prerequisites

CSS Syntax

Detailed Explanation: Selector Categories

CSS selectors are grouped into several types:

graph TD
    A[CSS Selectors]
    A --> B[1. Simple Selectors <br> Target by tag name, class, or ID]
    A --> C[2. Combinators <br> Target by relationships/hierarchy]
    A --> D[3. Pseudo-Classes <br> Target by state: hover, active]
    A --> E[4. Pseudo-Elements <br> Target parts of elements: before, after]
    A --> F[5. Attribute Selectors <br> Target by HTML attributes]

1. Simple Selectors

Universal Selector (*): Targets every single element on the page.
Element Selector (tag): Targets elements by their tag name (e.g. p, h1, div).
Class Selector (.class): Targets elements with a matching class attribute. Reusable across multiple elements.
ID Selector (#id): Targets a single element with a matching id attribute. Must be unique on the page.

2. Combinator Selectors

Combinators target elements based on their relationships in the DOM tree:

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Combinator Target Rules
    Parent[div container] -->|Child: div > p| Child1[p: Targeted]
    Parent -->|Descendant: div p| Child2[p: Targeted]
    Parent --> Child3[span]
    Child3 -->|Descendant: div p| Descendant[p: Targeted]
    end
    style Child1 fill:#10B981,stroke:#fff,color:#fff
    style Child2 fill:#10B981,stroke:#fff,color:#fff
    style Descendant fill:#10B981,stroke:#fff,color:#fff

Code Examples

Example 1: Simple Selectors in Action

Let's see how simple selectors target HTML elements in a profile page:

<h1 id="main-header">Our Team</h1>
<p class="description">Meet the frontend engineering team.</p>
<p class="description">We build premium user interfaces.</p>

/* ID Selector: Targets only the main-header (1 element) */
#main-header {
  text-align: center;
  color: #1e293b;
}

/* Class Selector: Targets both description paragraphs */
.description {
  font-size: 16px;
  color: #64748b;
}

Example 2: Descendant vs. Child Combinators

Let's analyze the difference in output between div p and div > p:

<div>
  <p>Direct child paragraph (Targeted by both).</p>
  <span>
    <p>Nested paragraph (Targeted ONLY by descendant 'div p').</p>
  </span>
</div>

/* Descendant: matches both paragraphs */
div p {
  color: blue;
}

/* Child: matches only the first paragraph */
div > p {
  font-weight: bold;
}

Summary

CSS selectors target DOM elements to apply styles. While simple selectors target elements by tag, class, or ID attributes, combinators leverage parent-child and sibling relationships to target nested layouts cleanly without adding class clutter to HTML tags.

Next Tutorial

Let's look at targeting tags directly using element selectors: Element Selectors.

← Back to Syllabus