➢A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
➢descendant selector (space)
➢child selector (>)
➢adjacent sibling selector (+)
➢general sibling selector (~)
➢The descendant selector matches all elements that are descendants of a specified element.
EXAMPLE:
div p {
background-color: yellow;
}
➢The child selector selects all elements that are the children of a specified element.
EXAMPLE:
div > p {
background-color: yellow;
}
➢The adjacent sibling selector is used to select an element that is directly after another specific element.
➢Sibling elements must have the same parent element, and "adjacent" means "immediately following".
EXAMPLE:
div + p {
background-color: yellow;
}
➢The general sibling selector selects all elements that are next siblings of a specified element.
EXAMPLE:
div ~ p {
background-color: yellow;
}