A complete guide to CSS combinators in 2022. You can find everything you need to know about CSS Combinators in this blog.

Hey 👋, I am Kunaal. In the article, we'll talk about something called CSS Combinators. You may have seen something like 

div ~ span

div > p

📌 What are Combinators ?

They are the combination of simple CSS selectors. What do I mean? The class selector, id selector, or even tag selectors - everything in CSS is a simple selector and when we use more than 1 selector it makes a combinator selector. For instance;

div

p

div p

Basically, the combinator selector defines a relationship between the selectors.

1. Descendant Selector

It basically selects all the elements inside or descendant to the specified element. For instance;

div p {
   color : red;
}

It will colour/style all the 

<p>

<div>

<p>

<div>
    <p>Paragraph</p>
    <h1><p>Nested Paragraph</p><h1>
</div>

2. Child Selector ( > )

Its selects all the elements inside the specified element excluding the nested elements. For instance,

div > p {
   color: red;
}

So the above example will select all the 

<p>

<div>

<p>

3. Adjacent Sibling Selector (+)

Adjacent Sibling Selector selects the elements just after element of the specified element. For instance,

div + p {
   color: red;
}

So the above code will only select the 

<p>

<div>

4. General Sibling Selector (~)

This is the last one and it selects all the elements after the specified element. For instance,

div ~ p {
  color: red;
}

The above example will select all the 

<p>

<div>

📌 Wrap up

So that's it. This was all about CSS Combinators, I hope you liked the article and this article was helpful for you. If you liked it or don't want to miss out on more interesting web dev tips and tricks, you can follow me on my Instagram or you can just simple subscribe my YouTube channel if you want to master web development.

Thanks for reading