CSS Combinators

A combinator is something that explains the relationship between the selectors. 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:

Let's crack this

Name How to represent? Example code for CSS Example code for HTML Usage
Descendant Selector (SPACE) element element 
              
 div p{
  ---------
  CSS Code
  ---------
}
              
              
              
<div>

  <p>Paragraph 1 in the div.
  </p> //1
  <p>Paragraph 2 in the div.
  </p> //2

  <section>
  <p>Paragraph 3 in the div.
  </p> //3
  </section>

</div>

<p>Paragraph 4. Not in a div.
</p> //4

<p>Paragraph 5. Not in a div.
</p> //5
Here, 1st, 2nd and 3rd <p> tags are inside of the <div> tag (It is called Descendant). So as per the CSS style will apply for the "p" tags inside the "div" tag. So the style will apply for 1,2 and 3 <P> tags. It'll also work for Class and ID.
Child Selector (>) element > element 
              
 div > p{
  ---------
  CSS Code
  ---------
}
              
              
              
<div>

  <p>Paragraph 1 in the div.
  </p> //1

  <p>Paragraph 2 in the div.
  </p> //2

  <section>

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

  </section>

  <p>Paragraph 4 in the div.
  </p> //4

</div>

<p>Paragraph 5. Not in a div.
</p> //5

<p>Paragraph 6. Not in a div.
</p> //6
The child selector (>) selects all elements that are the children of a specified element. Here it select all the "p" tags that are child of the "div" tag. 1st, 2nd and 4th "p" tags are the child, so style will apply on these tags.
3rd "p" tag is not a child of div, it's descendant; so it'll exclude.
Adjacent Sibling Selector (+) element + element 
              
 div + p{
  ---------
  CSS Code
  ---------
}
              
              
              
<div>

  <p>Paragraph 1 in the div.
  </p> //1

</div>

<p>Paragraph 2. After a div.
</p> //2

<p>Paragraph 3. After a div.
</p> //3

<div>

  <p>Paragraph 4 in the div.
  </p> //4

</div>

<p>Paragraph 5. After a div.
</p> //5

<p>Paragraph 7. After a div.
</p> //6
The + selector is used to select an element that is directly after another specific element. Here 2 nd and 5 th are the next door neighbor of the "div" tag, so style will apply on these two "p" tag.
General Sibling Selector (~) element ~ element 
              
 div ~ p{
  ---------
  CSS Code
  ---------
}
              
              
              
<p>Paragraph 1.
</p>

<div>

  <p>Paragraph 2.
  </p>

</div>

<p>Paragraph 3.
</p>

<code>Some code.
</code>

<p>Paragraph 4.
</p>
The general sibling selector (~) selects all elements that are next siblings of a specified element. Here It'll select all the "p" tags that are after the "div" tag. The style will apply on 3rd and 4th "p" tag.