CSS Selectors

CSS Combinators

Written by Swapnil RajaUpdated 30 Jul 2026

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. The supporting concepts are explained in CSS Element Selector and CSS Attribute Selectors.

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
Descendant combinator	1	12	1	1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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 Group Selector NextCSS Attribute Selectors