CSS Combinators can be confusing, so let's fix that!
There are 4 combinators in total and we'll be explaining them below 👇
But first...what are combinators?
Combinators select elements based on the relationship between two selectors. The combinator you use defines that relationship.
1. Descendant Combinator
Represented by a single space " " (without the quotes).
It selects elements that are the descendants of a specified element.
1.1 Descendant Combinator Example
In this example, all paragraphs that are a descendant of the featured class will be selected. These descendants are "wrapped" by the featured div.
2. Child Combinator
Represented by a > symbol.
It selects elements that are the children of a specified element.
2.1 Child Combinator Example
In this example, only the first paragraph within the featured div is selected because the second paragraph is nested within another div.
This nesting makes the second paragraph a descendant, and not a child.
3. Adjacent Sibling Combinator
Represented by a + sign.
This combinator selects the first sibling directly after a specified element.
3.1 Adjacent Sibling Combinator
In this example, there are two divs that come after the featured div. Both of these divs are siblings of the featured div.
Only the div that comes directly after the featured div is selected.
4. General Sibling Combinator
Represented by the ~ character.
This combinator selects all siblings that come after a specified element.
4.1 General Sibling Combinator Example
In this example, there are three divs that are the siblings of the featured div. One of these divs comes before the featured div, and two come after.
Only the two divs that come after the featured div are selected.