Tutorials CSS CSS Selectors

Introduction to CSS

What is CSS? CSS Selectors

Colors & Backgrounds

CSS Colors Backgrounds

Text & Fonts

Text Styling Web Fonts

Box Model

The Box Model Display & Positioning

Layout

Flexbox CSS Grid

Responsive Design

Media Queries Units & Sizing

Animations & Effects

Transitions & Transforms CSS Animations

Advanced CSS

Pseudo-classes & Pseudo-elements CSS Variables & Best Practices

CSS Beginner FREE

CSS Selectors

Lesson 2 of 16 Beginner Interactive

Selectors are patterns used to target HTML elements for styling. Understanding selectors is fundamental to writing effective CSS.

Basic Selectors

Element Selector — targets all elements of a type: p, h1, div
Class Selector — targets elements with a class attribute: .classname
ID Selector — targets a single element with a specific ID: #idname
Universal Selector — targets all elements: *
Grouping Selector — applies the same styles to multiple selectors: h1, h2, h3

Combinator Selectors

Descendant — div p (all p inside div)
Child — div > p (direct children only)
Adjacent Sibling — h1 + p (first p after h1)
General Sibling — h1 ~ p (all p after h1)

Syntax

CSS

/* Element Selector */
p { color: #333; }

/* Class Selector */
.highlight { background-color: yellow; }

/* ID Selector */
#header { font-size: 24px; }

/* Universal Selector */
* { box-sizing: border-box; }

/* Grouping Selector */
h1, h2, h3 { color: #1e3a8a; }

/* Descendant Combinator */
.sidebar a { color: blue; }

/* Child Combinator */
.nav > li { display: inline-block; }

CSS Selector Types

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Selector Types</title>
    <style>
        p { color: #333; line-height: 1.6; }                 /* element selector */
        .highlight { background-color: #fff3cd; padding: 2px 6px; } /* class selector */
        #main-title { font-size: 28px; color: #2c3e50; }      /* ID selector */
        .card p { color: #666; font-size: 14px; }             /* descendant selector */
        a:hover { color: #e74c3c; }                           /* pseudo-class */
        h2, h3 { font-family: Georgia, serif; }               /* group selector */
    </style>
</head>
<body>
    <h1 id="main-title">CSS Selector Types</h1>
    <p>Element selector p sets color: #333 and line-height: 1.6.</p>
    <p class="highlight">Class selector .highlight sets background-color: #fff3cd.</p>
    <div class="card"><p>Descendant .card p sets color: #666 and font-size: 14px.</p></div>
    <p>Hover the <a href="#">link</a> to see a:hover -> color: #e74c3c.</p>
    <h2>Group selector styles this h2 (Georgia serif).</h2>
</body>
</html>

Try It Yourself

Practice

Exercise

Select all <p> elements inside a div with class "content" and make them blue.

Answer

.content p {
    color: blue;
}

Exercise

Group h1, h2, and h3 selectors to apply the same font family.

Answer

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Exercise

Use an ID selector to style a unique header with id="page-header".

Answer

#page-header {
    background: #1e3a8a;
    color: white;
    padding: 20px;
}

Quick Quiz

Which selector has the highest specificity?

Element selector (p)

Class selector (.class)

ID selector (#id)

Universal selector (*)

ID selectors have higher specificity than class and element selectors.

What does the selector "div > p" target?

All p elements inside a div

Only direct child p elements of a div

The first p after a div

All divs containing p

The > combinator targets only direct children, not all descendants.

How do you select multiple different elements with the same style?

Use separate rules for each

Group them with commas

Use the * selector

Use !important

Comma-separated selectors apply the same declarations to all listed selectors.

Interview Questions

Specificity determines which CSS rule wins when multiple rules target the same element. It is calculated as a tuple (a, b, c) where a = number of ID selectors, b = number of class/attribute/pseudo-class selectors, c = number of element/pseudo-element selectors. Higher specificity wins. Inline styles override all, except !important.

A class can be applied to multiple elements on a page, while an ID must be unique. IDs have higher specificity (0,1,0) compared to classes (0,0,1). Use IDs for unique elements and classes for reusable styles. In practice, prefer classes for styling to avoid specificity issues.

What is CSS?

Tutorial Complete

Back to CSS