CSS Selectors

Introduction

CSS selectors are one of the most important topics in CSS. A selector tells the browser which HTML elements should be styled. If you do not understand selectors properly, CSS will feel confusing and unpredictable.

In this chapter, you will learn:

• What CSS selectors are
• Different types of selectors
• When and why to use each selector
• Practical, real-world examples

We will start from the simplest selectors and move step by step.

What is a CSS Selector?

A CSS selector is the part of a CSS rule that selects HTML elements.

Basic structure:

selector {
  property: value;
}

Example:

p {
  color: black;
}

Here, p is the selector. It selects all paragraph elements on the page.

1. Universal Selector

The universal selector selects all elements on the page.

Syntax:

* {
  margin: 0;
  padding: 0;
}

2. Element (Tag) Selector

This selector selects elements by their HTML tag name.

Example:

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

Use case: Styling all headings or all paragraphs.

Limitation: It affects every element of that type, which may not always be desired.

3. Class Selector

The class selector is one of the most commonly used selectors in CSS.

Syntax:

.class-name {
  property: value;
}

Example:

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

.highlight {
  color: red;
  font-weight: bold;
}

Key points:

• Class names start with a dot (.)
• Multiple elements can share the same class
• One element can have multiple classes

Multiple classes example: <div class="box shadow"></div>

4. ID Selector

The ID selector selects an element by its unique ID.

Syntax:

#id-name {
  property: value;
}

<div id="header">Welcome</div>

#header {
  background-color: #f0f0f0;
}

Rules:

• IDs must be unique
• One ID per page
• IDs have higher priority than classes

Class vs ID (Very Important)

Recommendation: Use classes for styling, IDs only when uniqueness is required.

5. Group Selector

Group selectors allow you to apply the same styles to multiple selectors.

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

Benefit: Reduces duplicate code and keeps CSS cleaner.

Relationship Selectors

6. Descendant Selector

Selects elements inside another element.

/* Selects p elements inside div */
div p {
  color: green;
}

Real-world usage: Styling text inside a container or menus inside headers.

7. Child Selector

Selects direct children only.

/* Affects only direct li children of ul */
ul > li {
  list-style: none;
}

8. Adjacent Sibling Selector

Selects the element immediately after another element.

/* Selects the first p after h1 */
h1 + p {
  margin-top: 0;
}

9. General Sibling Selector

Selects all siblings after a given element.

h2 ~ p {
  color: gray;
}

10. Attribute Selector

Selects elements based on attributes.

input[type="text"] {
  border: 1px solid #ccc;
}

Useful for forms, buttons, and custom inputs.

Pseudo Selectors

11. Pseudo-Class Selector

Pseudo-classes select elements based on state.

a:hover {
  color: red;
}

input:focus {
  outline: none;
}

Popular pseudo-classes: :hover, :active, :focus, :visited, :checked.

12. Pseudo-Element Selector

Pseudo-elements style specific parts of elements.

p::first-letter {
  font-size: 24px;
}

Common pseudo-elements: ::before, ::after, ::first-letter, ::first-line.

Selector Specificity (Basic Idea)

Some selectors override others. Here is the priority order:

1. Inline styles
2. ID selectors
3. Class selectors
4. Element selectors

Example:

#title { color: red; }
.title { color: blue; }
h1 { color: green; }

Result: Red (because ID has the highest priority).

We will cover specificity in depth later.

Common Beginner Mistakes & Best Practices