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 (~)

Ex: say we have a html like this:

<section id="products">
  <!-- p1 -->
  <p>Lorem ipsum dolor sit amet.</p>
  <article>
    <!-- p2 -->
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>

<!-- p3 -->
<p>Lorem ipsum dolor sit amet.</p>
<!-- p4 -->
<p>Lorem ipsum dolor sit amet.</p>

Determine which <p> will be affected by CSS after each selector.

descendant selector (space)

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside #products id:

/* Selecting all <p> in products */
#products p {
  background-color: yellow;
}

==p1 & p2 will be affected==

Child Selector (>)

The child selector selects all elements that are the children of a specified element.

The following example selects all <p> elements that are children of a #products id:

/* Selecting all <p> that are the direct children of product */
#products > p {
  background-color: yellow;
}

==Only p1 will be affected==

Adjacent Sibling Selector (+)