CSS Advanced Selectors

CSS Combinators

CSS Combinators are used to define relationships between selectors.

They allow you to target elements based on their relationship with other elements in the HTML structure.

Using combinators helps create more specific and powerful CSS rules without adding extra classes or IDs.

There are four main CSS combinators:

Descendant Selector ( )
Child Selector (>)
Adjacent Sibling Selector (+)
General Sibling Selector (~)

Syntax

Descendant Selector

css

div p {
    color: blue;
}

Selects all <p> elements inside a <div>.

Child Selector

css

div > p {
    color: green;
}

Selects only direct child <p> elements of a <div>.

Adjacent Sibling Selector

css

h2 + p {
    color: red;
}

Selects the first <p> immediately after an <h2>.

General Sibling Selector

css

h2 ~ p {
    color: purple;
}

Selects all <p> elements that come after an <h2> within the same parent.

Attributes

Combinator	Name	Description
	Descendant Selector	Selects all matching descendants
>	Child Selector	Selects direct children only
+	Adjacent Sibling Selector	Selects the next sibling
~	General Sibling Selector	Selects all following siblings

Example

CSS Combinators Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Combinators Example</title>
    <style>
        div p {
            color: blue;
        }
        div > h3 {
            color: green;
        }
        h2 + p {
            font-weight: bold;
        }
        h2 ~ span {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h3>Direct Child Heading</h3>
        <p>Paragraph inside div.</p>
        <section>
            <p>Nested paragraph inside section.</p>
        </section>
    </div>
    <h2>Main Heading</h2>
    <p>This paragraph is immediately after h2.</p>
    <span>First span after h2.</span>
    <span>Second span after h2.</span>
</body>
</html>

Output

Browser Output

css

All paragraphs inside the <div> will appear in blue
The direct child <h3> inside the <div> will appear in green
The paragraph immediately after the <h2> will appear bold
Both <span> elements after the <h2> will appear in red

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

Descendant selectors target all matching elements inside a parent.
Child selectors target only direct children.
Adjacent sibling selectors target only the next element.
General sibling selectors target all matching siblings after an element.
Combinators help reduce unnecessary classes and IDs.

Quick Comparison

Selector	Matches
div p	All paragraphs inside div
div > p	Direct child paragraphs only
h2 + p	First paragraph after h2
h2 ~ p	All paragraphs after h2

Conclusion

CSS Combinators allow you to create more precise and efficient selectors by targeting elements based on their relationship in the HTML structure. Understanding combinators is essential for writing clean, maintainable, and scalable CSS code.

PreviousCSS Input Fields NextCSS Attribute Selectors