Combinators Selectors

Descendant

The descendant selector (`A B`) selects all B elements that are inside A, at any level.

style.css

/* Descendant selector: selects all <p> inside <div> */
div p {
  color: blue;
}

index.html

<!-- Descendant Example -->
<div>
  <p>This paragraph is inside a div.</p>
  <section>
    <p>This paragraph is inside a section inside a div.</p>
  </section>
</div>
<p>This paragraph is outside the div.</p>

Direct child

The direct child selector (`A > B`) selects only B elements that are immediate children of A.

style.css

/* Direct child selector: selects only immediate <p> children of <div> */
div > p {
  color: green;
}

index.html

<!-- Direct Child Example -->
<div>
  <p>This paragraph is a direct child of div.</p>
  <section>
    <p>This paragraph is NOT a direct child of div.</p>
  </section>
</div>

Adjacent siblings

The adjacent sibling selector (`A + B`) selects the first B element immediately after A.

style.css

/* Adjacent sibling selector: selects <p> immediately after <h1> */
h1 + p {
  color: red;
}

index.html

<!-- Adjacent Sibling Example -->
<h1>Heading</h1>
<p>This paragraph comes immediately after h1.</p>
<p>This paragraph will not be selected.</p>

General siblings

The general sibling selector (`A ~ B`) selects all B elements that are siblings of A and come after it.

style.css

/* General sibling selector: selects all <p> siblings after <h1> */
h1 ~ p {
  color: orange;
}

index.html

<!-- General Sibling Example -->
<h1>Heading</h1>
<p>This paragraph is selected.</p>
<p>This one too.</p>
<div>Not a paragraph, not selected.</div>
🔗 CSS Combinator Selectors — Full Tutorial

🌐 What Are Combinator Selectors?

Combinators define the relationship between two CSS selectors. They allow you to target elements based on how they appear in the HTML structure — such as inside, next to, or following another element.

>>“Combinators help you style elements based on their relationships — not just their identity.”

Note

CSS has **4 major combinators**:
✔ Descendant (space)
✔ Child (>)
✔ Adjacent Sibling (+)
✔ General Sibling (~)

📦 List of Combinators

CombinatorSymbolDescription
DescendantspaceSelects elements inside another, at any depth
Child>Selects direct children only
Adjacent Sibling+Selects the next sibling immediately after
General Sibling~Selects all siblings after

🔹 1. Descendant Combinator — space

Selects any element nested **inside** another element (no matter how deep).

Descendant Selector

.card p {
  color: gray;
}

This styles all <p> elements inside elements with class .card.

🔹 2. Child Combinator — >

Selects only the direct children of an element.

Child Selector

ul > li {
  margin-left: 10px;
}

Only top-level li items inside the <ul> are affected.

Note

✔ Great for controlling layout without styling deeper nested elements.

🔹 3. Adjacent Sibling Combinator — +

Selects an element that appears **immediately after** another element on the same nesting level.

Adjacent Sibling Selector

h2 + p {
  margin-top: 0;
}

Styles the first paragraph right after an <h2> tag.

Note

✔ Useful for spacing control in headings and text blocks
✔ Only matches the FIRST immediately following element

🔹 4. General Sibling Combinator — ~

Selects all siblings that appear after a specified element.

General Sibling Selector

h2 ~ p {
  color: #555;
}

Styles all <p> tags that come after an <h2>, even if separated by other elements.

🧠 Visual Explanation of Combinators

SelectorMatches
A BB inside A (any depth)
A > BB is a direct child of A
A + BB immediately follows A
A ~ BAll B siblings after A

🧪 Practical Examples

1️⃣ Navigation Styling

Navigation Example

nav ul > li {
  display: inline-block;
}

nav li + li {
  margin-left: 20px;
}

All li after the first get spacing.

2️⃣ Form Label Interaction

Form Interaction

input:focus + label {
  color: blue;
}

Highlights the label next to the focused input field.

3️⃣ Blog Layout Example

Blog Layout

article h2 ~ p {
  line-height: 1.7;
}

4️⃣ Card Component Layout

Card Component

.card > h3 {
  margin-bottom: 1rem;
}

.card h3 + p {
  margin-top: 0.2rem;
}

⚠️ Common Mistakes

  • ❌ Overusing descendant combinator → can cause heavy CSS and unexpected matches
  • ❌ Misusing child combinator assuming it works like descendant
  • ❌ Forgetting adjacency rules for A + B
  • ❌ Assuming A ~ B selects previous siblings (it only selects following ones)

Note

🎯 Use the simplest combinator possible for clearer, faster CSS.

🔥 Summary

Combinators are powerful selectors that allow you to style elements based on DOM relationships — parent-child, sibling-sibling, deep nesting, and adjacency. They make CSS expressive and flexible while keeping HTML clean.

>>“Master combinators, and you master structural CSS.”

Learn more →MDN Docs 📘