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>.

PreviousCSS Group Selector NextCSS Attribute Selectors

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

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>

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

CSS Combinators

Syntax

Attributes

Example

Browser Support

Notes

Quick Comparison

Conclusion