Combinators (descendant, child >, adjacent +, sibling ~)
CSS combinators define the relationship between selectors, allowing precise targeting of elements based on their position in the document tree.
A B { ... } /* Descendant */
A > B { ... } /* Child */
A + B { ... } /* Adjacent Sibling */
A ~ B { ... } /* General Sibling */This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.
What it does
Overview
CSS combinators define the relationship between selectors, allowing precise targeting of elements based on their position in the document tree.
CSS combinators are special characters or spaces that explain the relationship between two or more selectors, enabling more complex and precise targeting of elements within the HTML document structure. 1. **Descendant Combinator (space)**: `A B` selects all `B` elements that are descendants of `A` (i.e., `B` is inside `A` at any depth). For example, `div p` selects all paragraphs inside any `div`. 2. **Child Combinator (>)**: `A > B` selects all `B` elements that are *direct children* of `A`. This is more specific than the descendant combinator. For example, `ul > li` selects only `li` elements that are immediate children of a `ul`, not `li` elements nested deeper. 3. **Adjacent Sibling Combinator (+)**: `A + B` selects the *first `B` element immediately preceded by* an `A` element, both sharing the same parent. For example, `h1 + p` selects the paragraph directly following an H1 heading. 4. **General Sibling Combinator (~)**: `A ~ B` selects all `B` elements that are siblings of `A` (i.e., share the same parent) and come *after* `A` in the document flow. For example, `h2 ~ p` selects all paragraphs that come after an H2 heading, within the same parent. These combinators are essential for writing efficient and maintainable CSS, as they allow for highly contextual styling without needing to add extra classes or IDs to every element. They leverage the inherent structure of HTML to apply styles, making CSS more robust and less reliant on specific markup changes.
Quick reference
Syntax
A B { ... } /* Descendant */
A > B { ... } /* Child */
A + B { ... } /* Adjacent Sibling */
A ~ B { ... } /* General Sibling */See it in practice
Examples
Descendant combinator: Styling paragraphs inside a div
div p {
color: blue;
}
<!-- HTML -->
<div>
<p>This is a blue paragraph.</p>
<span><p>This is also blue.</p></span>
</div>
<p>This is not blue.</p>Both paragraphs inside the div (including the nested one) will be blue.
The `div p` selector targets all `<p>` elements that are anywhere inside a `<div>` element, regardless of how many levels deep they are.
Child combinator: Styling direct list items
ul > li {
list-style-type: square;
}
<!-- HTML -->
<ul>
<li>Item 1
<ul>
<li>Nested Item</li>
</ul>
</li>
<li>Item 2</li>
</ul>Only 'Item 1' and 'Item 2' will have square list markers. 'Nested Item' will not.
The `ul > li` selector only targets `<li>` elements that are direct children of a `<ul>`, excluding any `<li>` elements nested within another `<ul>` or `<li>`.
Adjacent sibling combinator: Styling a paragraph after an H2
h2 + p {
margin-top: 0;
font-style: italic;
}
<!-- HTML -->
<h2>Section Title</h2>
<p>This paragraph is italicized.</p>
<p>This paragraph is not.</p>Only the first paragraph immediately following an H2 will be italicized and have no top margin.
The `h2 + p` selector targets only the `<p>` element that directly follows an `<h2>` element, both sharing the same parent.
General sibling combinator: Styling all paragraphs after an H3
h3 ~ p {
background-color: #eee;
padding: 5px;
}
<!-- HTML -->
<div>
<h3>Introduction</h3>
<p>First paragraph.</p>
<span>Some text</span>
<p>Second paragraph.</p>
<h4>Sub-heading</h4>
<p>Third paragraph.</p>
</div>The 'First paragraph', 'Second paragraph', and 'Third paragraph' will all have a light gray background and padding.
The `h3 ~ p` selector targets all `<p>` elements that are siblings of an `<h3>` and appear after it in the document flow, within the same parent.
Debug faster
Common Errors
Misunderstanding Descendant vs. Child
Cause: Confusing the descendant combinator (space) with the child combinator (>) and expecting styles to apply only to direct children when a descendant selector is used.
Fix: Remember that a space targets elements at any depth, while `>` targets only immediate children. Choose the appropriate combinator based on the desired level of specificity in the DOM tree.
div p { color: red; } /* Applies to <p> in <div><span><p>> */
div > p { color: blue; } /* Only applies to <p> directly in <div> */Runtime support
Compatibility
Source: MDN Web Docs
Common questions
Frequently Asked Questions
CSS combinators define the relationship between selectors, allowing precise targeting of elements based on their position in the document tree.
Misunderstanding Descendant vs. Child: Remember that a space targets elements at any depth, while `>` targets only immediate children. Choose the appropriate combinator based on the desired level of specificity in the DOM tree.