Understanding CSS Combinators

Stylesheets can reference a particular element in your HTML document by using what are called CSS selectors. These selectors can be classes, IDs, the element itself, etc.

The selector that we will talk about in this article is the combinator.

They are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.— MDN Web Docs

We always start reading the combinator from right to left. Now let's start with our first combinator.:

1.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.

Long story short : The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside an element with a class of box: 

.box p {
    color: red;
   } 
        

HTML:

<div class="box">
  <p>Text in .box</p>
</div
<p>Text not in .box</p>>        

Result:

2.child combinator

(>) is placed between two CSS selectors. it selects all elements that are the children of a specified element.

The following example selects all <p> elements that are children of a <div> element:

div > p {
  background-color: yellow;
 }        

HTML:

<div
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <p>Paragraph 3 in the div (inside a section element).</p>
  </section>
  <p>Paragraph 4 in the div.</p>
</div>>        

Result:

3.Adjacent Sibling Selector

(+) is placed between two CSS selectors. the adjacent sibling selector is used to select an element that is directly after another specific element.

The following example selects the first <p> element that are placed immediately after <div> elements:

div + p {
  background-color: red;
 }        

HTML:

<div
  <p>Paragraph 1 in the div.</p>
</div>
<p>Paragraph 2. After a div.</p>
<div>
  <p>Paragraph 3 in the div.</p>
</div>
<p>Paragraph 4. After a div.</p>>        

Result:

4.General Sibling Selector

If you want to select siblings of an element even if they are not directly adjacent, then you can use the general sibling combinator (~). it selects all elements that are next siblings of a specified element.

The following example selects all <p> elements that are next siblings of <div> elements:

div ~ p {
  background-color: blue;
}        

HTML:

<p>Paragraph 1.</p
<div>
  <p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>>        

Result:

References: