Flash cards
Review the key moves
What is the main idea behind CSS Combinators?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-color: yellow;Put the learning moves in the order that makes the concept easiest to apply.
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 <p> elements inside <div> elements:
Example
div p {
background-color: yellow;
}Live preview
Child Combinator (>)
The child combinator selects all elements that are direct children of a specified element.
The following example selects all <p> elements that are direct children of <div>:
Example
div > p {
background-color: yellow;
}Live preview
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 <p> element that immediately follows a <div>, and share the same parent:
Example
div + p {
background-color: yellow;
}Live preview
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;
}Live preview