CSS Combinators
A combinator is something that defines the relationship between two or more selectors.
A CSS selector can contain more than one selector. Between the selectors, we can include a combinator, to create a more specific selection.
There are four different combinators in CSS:
- Descendant combinator (space)
- Child combinator (>)
- Next sibling combinator (+)
- Subsequent-sibling combinator (~)
Descendant Combinator (space)
The descendant combinator matches all elements that are descendants (children, grandchildren, etc.) of a specified element.
The following example selects all
elements inside
Example
div p {
background-color: yellow;
}
Child Combinator (>)
The child combinator selects all elements that are direct children of a specified element.
The following example selects all
elements that are direct children of
Example
div > p {
background-color: yellow;
}
Next Sibling Combinator (+)
The next sibling combinator is used to select an element that is directly after a specific element.
Sibling elements must have the same parent element.
The following example selects the first
element that immediately follows a
Example
div + p {
background-color: yellow;
}
Subsequent-sibling Combinator (~)
The subsequent-sibling combinator selects all elements that are next siblings of a specified element.
The following example selects all
elements that are next siblings of
Example
div ~ p {
background-color: yellow;
}
CSS Combinators Reference
Note: For a complete list of all CSS combinators, visit our CSS Combinators Reference.
Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo AvailableCSS Combinators – FAQs
Quick answers about learning CSS Combinators in CSS.
