CSS 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. 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
Descendant Selector
css
div p {
color: blue;
}Selects all <p> elements inside a <div>.
Child Selector
Child Selector
css
div > p {
color: green;
}Selects only direct child <p> elements of a <div>.
Adjacent Sibling Selector
Adjacent Sibling Selector
css
h2 + p {
color: red;
}Selects the first <p> immediately after an <h2>.
General Sibling Selector
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.