Join WhatsApp

Home

Daily Quiz

Learn

News

Tools

CSS Selectors Explained: Complete Guide with Examples (Beginner to Advanced)

By admin

23/February/2026 , 2:31 AM

CSS selectors are the foundation of styling in web development.
If you want to design beautiful websites, understanding selectors is essential.

In this complete guide, you will learn:

  • What CSS selectors are
  • How they work
  • All selector types with real examples
  • Practical use cases

What is a CSS Selector?

A CSS selector is a pattern used to select HTML elements so that styles can be applied to them.

👉 In simple words:
A selector tells CSS which HTML element should receive the style.

Basic CSS Selector Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
}
</style>
</head>
<body>

<p>This is paragraph</p>
<p>This is another paragraph</p>

</body>
</html>

Explanation:

The selector:

p

targets all <p> elements.
Result: Both paragraphs become red.

Types of CSS Selectors (Complete Guide)

CSS provides multiple selector types to target elements precisely.

1. Class Selector (.class)

Definition

The class selector selects all elements that have a specific class attribute.

Syntax

.className {
  property: value;
}

Example

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

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

👉 Only the first paragraph becomes red and bold.

Real-world use:
Buttons, cards, alerts, layouts, reusable UI components.

2. ID Selector (#id)

Definition

The ID selector selects a single unique element with a specific id attribute.

Syntax

#idName {
  property: value;
}

Example

<h1 id="title">Welcome</h1>

#title {
  color: blue;
  text-align: center;
}

👉 The heading becomes blue and centered.

Important rule:
IDs must be unique in a page.

3. Universal Selector (*)

Definition

The universal selector selects all elements in the document.

Syntax

* {
  property: value;
}

Example (CSS Reset)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

👉 Used in almost every professional project.

4. Attribute Selector

Definition

Attribute selectors select elements based on the presence or value of an HTML attribute.

Select elements with attribute

input[required] {
  border: 2px solid red;
}

<input type="text" required>
<input type="email">

👉 Only required input gets red border.

Select attribute with value

input[type="email"] {
  background: lightyellow;
}

👉 Targets email inputs.

Attribute starts with value

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

👉 Links starting with https.

Attribute ends with value

img[src$=".png"] {
  border: 2px solid blue;
}

👉 PNG images only.

Attribute contains value

a[href*="google"] {
  font-weight: bold;
}

👉 Links containing “google”.

5. Pseudo-Class Selector (:state)

Definition

Pseudo-class selectors select elements based on state or condition.

Common states: hover, focus, active, first-child.

Hover example

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

👉 Applied when mouse is over button.

First child example

li:first-child {
  color: red;
}

👉 Only first list item.

Focus example

input:focus {
  border: 2px solid blue;
}

👉 Active input field.

6. Pseudo-Element Selector (::part)

Definition

Pseudo-elements style a specific part of an element.

First letter example

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

👉 Styles first letter.

Before example

h1::before {
  content: "🔥 ";
}

👉 Adds content before heading.

After example

h1::after {
  content: " ✔";
}

👉 Adds content after heading.

7. Combinator Selectors (Relationships)

Definition

Combinators in CSS are special selectors that define the relationship between two selectors.
They allow you to target elements based on how they are positioned relative to other elements in the HTML structure (DOM tree).

Instead of selecting elements by class, id, or tag alone, combinators let you select elements based on parent-child or sibling relationships.

There are four main combinators:

Descendant Selector (A B)

Syntax

A B {
  property: value;
}

Meaning

Selects all elements B that are inside element A, at any nesting level.

It does NOT matter how deeply nested B is — as long as it is inside A.

Example

div p {
  color: red;
}

What It Selects

All <p> elements inside <div> elements — including:

  • Direct children
  • Grandchildren
  • Great-grandchildren
  • Any depth

HTML Example

<div>
  <p>Paragraph 1</p>
  <section>
    <p>Paragraph 2</p>
  </section>
</div><p>Paragraph 3</p>

Result

  • Paragraph 1 → ✅ Red
  • Paragraph 2 → ✅ Red
  • Paragraph 3 → ❌ Not affected

Key Point

✔ Most commonly used combinator
✔ Matches ANY level inside

Child Selector (A > B)

🔹 Syntax

A > B {
  property: value;
}

Meaning

Selects only direct children B of A.

It does NOT select nested grandchildren.

Example

div > p {
  color: blue;
}

HTML Example

<div>
  <p>Paragraph 1</p>
  <section>
    <p>Paragraph 2</p>
  </section>
</div>

Result

  • Paragraph 1 → ✅ Blue (direct child)
  • Paragraph 2 → ❌ Not affected (inside <section>)

Key Difference from Descendant

SelectorDepth
A BAny level
A > BDirect children only

Adjacent Sibling Selector (A + B)

Syntax

A + B {
  property: value;
}

Meaning

Selects the first B element that comes immediately after A, and both must share the same parent.

It only selects one immediate next sibling.

Example

h1 + p {
  color: green;
}

HTML Example

<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

Result

  • Paragraph 1 → ✅ Green
  • Paragraph 2 → ❌ Not affected

Because only the first <p> immediately after <h1> is selected.

Important Rules

✔ Must be immediate next element
✔ Must share the same parent
✔ Only selects one element

General Sibling Selector (A ~ B)

Syntax

A ~ B {
  property: value;
}

Meaning

Selects all B elements that come after A, as long as they share the same parent.

Unlike +, this selects multiple siblings.

Example

h1 ~ p {
  color: orange;
}

HTML Example

<h1>Title</h1>
<p>Paragraph 1</p>
<div>Something</div>
<p>Paragraph 2</p>

Result

  • Paragraph 1 → ✅ Orange
  • Paragraph 2 → ✅ Orange

Both come after <h1> and share the same parent.

Quick Comparison Table

CombinatorSymbolSelects
DescendantA BAll B inside A (any depth)
ChildA > BDirect children only
Adjacent SiblingA + BFirst B immediately after A
General SiblingA ~ BAll B after A (same parent)

Visual Understanding

Imagine this structure:

Parent
 ├── A
 ├── B
 ├── C
 │    └── B
 └── B
  • Parent B → selects ALL B inside
  • Parent > B → selects only direct B children
  • A + B → selects B immediately after A
  • A ~ B → selects all B after A

When to Use Each

  • Use Descendant when structure depth doesn’t matter.
  • Use Child when you want strict control.
  • Use Adjacent sibling for styling based on immediate order.
  • Use General sibling for styling elements that follow another.

CSS Selector Summary Table

SelectorMeaningExample
ElementSelect tagp
ClassSelect class.box
IDSelect id#header
UniversalAll elements*
AttributeAttribute value[type="text"]
Pseudo-classState:hover
Pseudo-elementPart::before
CombinatorRelationshipdiv p

Why CSS Selectors Are Important

CSS selectors allow developers to:

  • Target specific elements
  • Build reusable components
  • Create responsive layouts
  • Control UI states
  • Write clean maintainable CSS

Without selectors, styling web pages would not be possible.

Conclusion

CSS selectors are the core mechanism that connects HTML structure with visual styling.
From simple element selectors to advanced combinators and pseudo-elements, mastering selectors gives full control over website design.

If you are learning web development, selectors are one of the most important CSS concepts to master.

#News #Coding #Learning

Leave a Comment