CSS Combinators
Combinators are used in simple selectors. There are four different combinators in CSS:
Descendant selector (space).
Child selector (>).
Adjacent sibling selector (+).
General sibling selector (~).
Descendant Selector
The descendant selector matches all elements that are descendants of a particular element.
The following example selects all descendant <p> elements within the <div> element:
Click on the "Try it Now" button to see how it works.
Child Selector
The descendant selector matches all elements that are the children of a particular element.
The following example selects all descendant <p> elements that are children of a <div> element:
Click on the "Try it Now" button to see how it works.
Adjacent sibling Selector
The descendant selector matches all elements that are adjacent sibling of a particular element.
The following example selects all adjacent sibling <p> elements within the <div> element:
Click on the "Try it Now" button to see how it works.
General sibling Selector
The descendant selector matches all elements that are general sibling of a particular element.
The following example selects all general sibling <p> elements within the <div> element:
Click on the "Try it Now" button to see how it works.