CSS Combinators

1 April 2025 | Category: CSS

CSS combinators are used to define the relationship between different HTML elements and how styles should be applied based on their hierarchy. There are four main types of combinators in CSS:

Descendant Selector ( – Space)
Child Selector (> – Greater Than)
Adjacent Sibling Selector (+ – Plus)
General Sibling Selector (~ – Tilde)

1️⃣ Descendant Selector ( – Space)

Selects all elements inside another element.
It doesn’t matter how deep the elements are nested inside the parent.

✅ Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div p {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div>
        <p>This paragraph is inside a div.</p>
        <section>
            <p>This paragraph is also inside a div (nested inside section).</p>
        </section>
    </div>
    <p>This paragraph is outside the div.</p>
</body>
</html>

🔹 All <p> tags inside <div> will be red, no matter how deeply nested they are.
🔹 The last <p> outside <div> will not be affected.

2️⃣ Child Selector (`>` – Greater Than)

Selects only the direct children of an element.
It does not select nested elements inside deeper levels.

✅ Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div > p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a direct child of div.</p>
        <section>
            <p>This is nested inside a section (not affected).</p>
        </section>
    </div>
</body>
</html>

🔹 Only direct <p> inside <div> will be blue.
🔹 <p> inside <section> (which is inside <div>) will not be affected.

3️⃣ Adjacent Sibling Selector (`+` – Plus)

Selects the very next sibling of an element.
The selected element must be immediately after the specified element.

✅ Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h2 + p {
            color: green;
        }
    </style>
</head>
<body>
    <h2>Heading</h2>
    <p>This paragraph is immediately after the h2 (will be green).</p>
    <p>This paragraph is not immediately after h2 (won't be affected).</p>
</body>
</html>

🔹 Only the first <p> after <h2> will be green.
🔹 The second <p> won’t be affected because it is not directly after <h2>.

4️⃣ General Sibling Selector (`~` – Tilde)

Selects all siblings after a specified element.
It doesn’t have to be immediately after, but must be in the same parent.

✅ Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h2 ~ p {
            color: orange;
        }
    </style>
</head>
<body>
    <h2>Heading</h2>
    <p>First paragraph (will be orange).</p>
    <p>Second paragraph (will be orange).</p>
    <span>Not affected (not a `<p>`).</span>
</body>
</html>

🔹 All <p> tags after <h2> will be orange, even if other elements (like <span>) come between them.
🔹 Other elements like <span> won’t be affected.

📌 Summary of CSS Combinators

Combinator	Selector	Meaning
Descendant ( )	`A B`	Selects all `B` elements inside `A` (deeply nested included).
Child (`>`)	`A > B`	Selects only direct child `B` inside `A`.
Adjacent Sibling (`+`)	`A + B`	Selects the first `B` immediately after `A`.
General Sibling (`~`)	`A ~ B`	Selects all `B` elements after `A` (not just the first one).

💡 When to Use Each Combinator?

✅ Use Descendant (A B) when you need to style elements inside a parent at any depth.
✅ Use Child (A > B) when you need to style only direct children.
✅ Use Adjacent Sibling (A + B) when you need to style the very next element.
✅ Use General Sibling (A ~ B) when you need to style all elements after a specific one.

CSS Combinators

1️⃣ Descendant Selector ( – Space)

✅ Example

2️⃣ Child Selector (> – Greater Than)

✅ Example

3️⃣ Adjacent Sibling Selector (+ – Plus)

✅ Example

4️⃣ General Sibling Selector (~ – Tilde)

✅ Example

📌 Summary of CSS Combinators

💡 When to Use Each Combinator?

2️⃣ Child Selector (`>` – Greater Than)

3️⃣ Adjacent Sibling Selector (`+` – Plus)

4️⃣ General Sibling Selector (`~` – Tilde)