Loading lesson path
Concept visual
Start at both ends
Overview
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 (+)
Formula
Subsequent - sibling combinator (~)Descendant Combinator (space) The descendant combinator matches all elements that are descendants (children, grandchildren, etc.) of a specified element.
Formula
The following example selects all < p > elements inside < div > elements:Example div p {
background-color: yellow;
}
Child Combinator (>)The child combinator selects all elements that are direct children of a specified element.
Formula
The following example selects all < p > elements that are direct children of < div >: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.
Formula
The following example selects the first < p > element that immediately follows a < div >, and share the same parent:Example div + p {
background-color: yellow;
}Formula
Subsequent - sibling Combinator (~)
The subsequent - sibling combinator selects all elements that are next siblings of a specified element.
The following example selects all < p > elements that are next siblings of < div >, and share the same parent:Example div ~ p {
background-color: yellow;
}For a complete list of all CSS combinators, visit our CSS Combinators Reference.