CSS — Combinators & Grouping Selectors
Hi everyone,
Welcome to chapter-2 of a series of articles where I will tell you about all selectors in CSS.
I will tell you what are combinators and grouping selectors in this section.
2) Combinators
Descendant combinator (whitespace)
The descendant combinator — typically represented by a single space (“ “) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.
— Output
Child combinator (>)
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
— Output
General sibling combinator (~)
The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
— Output
Adjacent sibling combinator (+)
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
— Output
3) Grouping selectors
Selector list (,)
Selects all the matching nodes.
— Output
For all the examples in this section, visit.
We have come to the end of this chapter. See you in chapter-3.
