CSS Selectors

Introduction

In the previous lesson, you learned the syntax used to write CSS rules.

You learned that every standard CSS rule begins with a selector.

Now it is time to understand selectors in detail.

Selectors are one of the most important parts of CSS because they decide exactly which HTML elements should receive a style.

Without selectors, the browser would know what style to apply but would not know which elements should receive it.

What are CSS Selectors?

A CSS selector is a pattern used to find and target HTML elements.

After the browser finds elements that match the selector, it applies the declarations written inside the rule.

p {
    color: blue;
}

In this example, p is the selector.

The browser searches the document for every <p> element and applies the blue text color.

<h1>CSS Selectors</h1>

<p>First paragraph</p>

<p>Second paragraph</p>

Why Do We Need Selectors?

A webpage can contain hundreds or thousands of HTML elements.

Different elements need different styles.

Selectors allow developers to control exactly where CSS rules should apply.

<h1>Main Heading</h1>

<p>Normal paragraph</p>

<p class="important">
    Important paragraph
</p>

<button>Submit</button>

h1 {
    color: purple;
}

p {
    color: gray;
}

.important {
    color: red;
}

button {
    background-color: green;
    color: white;
}

Real-World Analogy

Imagine a teacher giving instructions to students in a classroom.

The teacher can give an instruction to everyone, a group of students, one specific student, or students with a particular characteristic.

Everyone → Stand up

Red Team → Move left

Student #25 → Answer the question

Students with laptops → Open the browser

* {
    box-sizing: border-box;
}

.red-team {
    color: red;
}

#student-25 {
    font-weight: bold;
}

[data-device="laptop"] {
    background-color: yellow;
}

Basic Selector Syntax

A selector is written before the declaration block.

selector {
    property: value;
}

h1 {
    color: blue;
}

h1 {
│
│   color: blue;
│
}
│
└── Selector

The selector can be simple or complex.

p { }

.card { }

#header { }

nav a { }

.card > h2 { }

input[type="email"] { }

button:hover { }

Types of CSS Selectors

CSS provides many selector types for different targeting requirements.

1. Element Selector

The element selector targets HTML elements using their tag name.

element {
    property: value;
}

p {
    color: blue;
}

This rule selects every <p> element on the page.

<p>First paragraph</p>

<p>Second paragraph</p>

<p>Third paragraph</p>

h1 {
    color: purple;
}

button {
    background-color: green;
}

a {
    color: red;
}

2. Class Selector

The class selector targets elements that contain a specific class attribute value.

A class selector begins with a dot followed by the class name.

.class-name {
    property: value;
}

<p class="highlight">
    Important paragraph
</p>

<p>
    Normal paragraph
</p>

<div class="highlight">
    Important box
</div>

.highlight {
    background-color: yellow;
}

The class can be reused on different elements.

<h2 class="success">Payment Successful</h2>

<p class="success">Your order is confirmed.</p>

<button class="success">Continue</button>

.success {
    color: green;
}

3. ID Selector

The ID selector targets an element using its id attribute.

An ID selector begins with a hash symbol followed by the ID value.

#id-name {
    property: value;
}

<header id="main-header">
    Welcome to PrograMinds
</header>

#main-header {
    background-color: purple;
    color: white;
    padding: 20px;
}

4. Universal Selector

The universal selector uses an asterisk and can match all elements.

* {
    property: value;
}

* {
    box-sizing: border-box;
}

This rule applies box-sizing: border-box to every element.

<h1>Heading</h1>

<p>Paragraph</p>

<button>Button</button>

* {
    color: blue;
}

5. Grouping Selector

The grouping selector allows multiple selectors to share the same declarations.

Selectors are separated with commas.

h1 {
    color: purple;
}

h2 {
    color: purple;
}

h3 {
    color: purple;
}

h1,
h2,
h3 {
    color: purple;
}

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subheading</h3>
<p>Normal paragraph</p>

Selector Combinators

Combinators describe relationships between selectors.

They allow CSS to target elements based on where they appear relative to other elements.

<div>
    <h2>Heading</h2>

    <p>First paragraph</p>

    <section>
        <p>Nested paragraph</p>
    </section>

    <p>Last paragraph</p>
</div>

6. Descendant Selector

The descendant selector targets elements located anywhere inside another element.

A space is written between the selectors.

parent descendant {
    property: value;
}

<article>
    <p>Direct paragraph</p>

    <div>
        <p>Nested paragraph</p>
    </div>
</article>

<p>Outside paragraph</p>

article p {
    color: blue;
}

Both paragraphs inside the article match, even though one is nested inside another div.

7. Child Selector

The child selector targets only elements that are direct children of another element.

The greater-than symbol is written between the selectors.

parent > child {
    property: value;
}

<article>
    <p>Direct child paragraph</p>

    <div>
        <p>Nested paragraph</p>
    </div>
</article>

article > p {
    color: red;
}

8. Adjacent Sibling Selector

The adjacent sibling selector targets an element that appears immediately after another element at the same parent level.

A plus symbol is written between the selectors.

first + next {
    property: value;
}

<h2>Section Heading</h2>

<p>First paragraph</p>

<p>Second paragraph</p>

h2 + p {
    color: red;
}

Only the first paragraph matches because it appears immediately after the <h2>.

9. General Sibling Selector

The general sibling selector targets matching siblings that appear after another element.

A tilde symbol is written between the selectors.

first ~ sibling {
    property: value;
}

<h2>Section Heading</h2>

<p>First paragraph</p>

<div>Information Box</div>

<p>Second paragraph</p>

<p>Third paragraph</p>

h2 ~ p {
    color: purple;
}

10. Attribute Selector

Attribute selectors target elements according to the presence or value of an HTML attribute.

[attribute] {
    property: value;
}

<input type="text">

<input type="email">

<input type="password">

input[type="email"] {
    border: 2px solid blue;
}

input[disabled] {
    background-color: lightgray;
}

a[href^="https"] {
    color: green;
}

a[href$=".pdf"] {
    font-weight: bold;
}

11. Pseudo-Class Selector

A pseudo-class selects an element based on a state, condition, or structural position.

Pseudo-classes begin with a single colon.

selector:pseudo-class {
    property: value;
}

<button>
    Move Mouse Over Me
</button>

button {
    background-color: blue;
    color: white;
}

button:hover {
    background-color: green;
}

li:first-child {
    color: red;
}

li:last-child {
    color: green;
}

12. Pseudo-Element Selector

A pseudo-element targets a specific part of an element or creates a styleable generated box.

Modern pseudo-element syntax normally uses two colons.

selector::pseudo-element {
    property: value;
}

<p>
    Cascading Style Sheets control the appearance of webpages.
</p>

p::first-letter {
    color: red;
    font-size: 40px;
}

.price::before {
    content: "₹";
}

.required::after {
    content: " *";
    color: red;
}

Combining Selectors

Selectors can be combined to create more precise targeting patterns.

<article class="card">
    <h2>CSS Course</h2>

    <p class="description">
        Learn CSS step by step.
    </p>

    <a href="/css">
        Start Learning
    </a>
</article>

.card h2 {
    color: purple;
}

.card .description {
    color: gray;
}

.card > a {
    color: green;
}

.card a:hover {
    color: red;
}

Selector Specificity

Sometimes multiple CSS selectors match the same element and try to set the same property.

Specificity is one of the rules the browser uses to determine which declaration wins.

<p
    id="message"
    class="important"
>
    Welcome to CSS
</p>

p {
    color: blue;
}

.important {
    color: green;
}

#message {
    color: red;
}

The ID selector has greater specificity than the class selector and element selector, so the text becomes red.

How Browser Matches Selectors

The browser parses CSS selectors and determines which elements in the document match each selector.

<div class="card">
    <h2>CSS Course</h2>
    <p>Learn selectors.</p>
</div>

<div>
    <h2>HTML Course</h2>
</div>

.card h2 {
    color: purple;
}

Browser Rendering Flow

Selector matching is an important part of the browser rendering process.

CSS Selector
      │
      ▼
Parse Selector
      │
      ▼
Search for Matches
      │
      ▼
Check Element Structure
      │
      ▼
Check Classes / IDs / Attributes
      │
      ▼
Check States and Conditions
      │
      ▼
Collect Matching Rules
      │
      ▼
Resolve Cascade
      │
      ▼
Calculate Final Styles
      │
      ▼
Render Page

Real-World Applications

CSS selectors are used throughout modern websites and applications.

Advantages

CSS selectors provide flexible and precise control over webpage styling.

Common Beginner Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

CSS selectors determine which HTML elements receive styling declarations.

Element selectors target HTML tags, class selectors target reusable class values, and ID selectors target unique identifiers.

The universal selector can match all elements, while grouping selectors allow multiple independent selectors to share the same declarations.

Combinators allow elements to be selected according to their relationships in the HTML structure.

The descendant selector targets nested elements at any depth, while the child selector targets direct children only.

Adjacent and general sibling selectors target elements according to their sibling relationships.

Attribute selectors target elements according to HTML attributes and their values.

Pseudo-classes target states and conditions such as hover, focus, checked, and structural positions.

Pseudo-elements target specific parts of elements or create styleable generated boxes.

Selectors can be combined to create precise targeting patterns.

When multiple declarations compete for the same property, specificity can help determine the winner as part of the larger CSS cascade.

Good selectors should be precise enough to target the correct elements while remaining simple enough to understand and maintain.

In the next lesson, you will learn CSS colors and discover the different ways to add color to text, backgrounds, borders, and other visual elements.