All about Combinators in CSS

Hey all, I hope you are doing great. Today we are going to see the concept of Combinators in the CSS. If you don’t know about me, please check my linked-in profile. You can also follow me on Twitter. My twitter id is Vrushab Bayas .

Combinators allows us to bit more clear about our CSS rules and select elements by passing more information to the selectors.

There are four types of Combinators as show in the below image

1)Adjacent Sibling ( + )

In Adjacent Siblings Elements share the same parents.The only important thing is that second element comes immediately after the first element.We use + operator to use Adjacent sibling in the CSS.Please refer below image for better understanding.

In the above code snippet, the h2 tag is the first element and the p tag is the second element, we are changing the color of p tags which are followed by the h2 tag; hence, the color of the p tag is not changed who is after the h3 tag.

2)General Sibling ( ~ )

In this case also elements shares the same parent,Only difference between Adjacent and general is that in general sibling any element after the first element will get affected. We use ~ operator to use General sibling in CSS.Please refer below image for better understanding.

As show in above image color of all p tags got changed irrespective of it’s immediate child of h2 or not unlike Adjacent Selector.

3) Child ( > )

In this case second element is direct child of the first element.We use > operator to select the child element.Please refer below image for better understanding.

In above example all direct child of div tag got red color unlike second p tag which is child of article tag and not direct child of the div tag.

4)Descendant ( empty space)

In this type of combinator level doesn’t matter.Only rule we should care about is second element is descendant of the first element.we use space to use this feature in the CSS.Please refer below image for better understanding.

As you can see in the above image, all p tags got red color because all p tags are descendants of the div tag. This is the most commonly used Combinator.

So the Combinator is basically A CSS feature which allows you to combine two selectors in a dependent way.

Thank you for reading this. I hope you have learned something new today. Have a good day and if you liked it, don’t forget to clap, we will meet in the next blog.