How to Style elements with css combinators selectors.

Introduction — Hello I am Abhishek Yadav and this is my first blog. So in this blog post, I am going to talk about CSS combinator. So, What are CSS combinators?  CSS combinators define a relationship between multiple selectors in a way so that you can target elements to style them. There are four CSS combinator selectors.

1.Descendant selector.

2.Child selector.

3.Adjacent sibling selector

4. General sibling Selector.

Descendant selector  — A descendant selector is used to select elements that are descendants of one specified parent element. The elements that are descendants of our specified parent element can be a direct child or child of the child or so forth. You can understand this in the way that your father is the direct child of your grandfather and you are the grandchild of your grandfather, thus we can say that your father and you and the generation that will come after you will be descendants of your grandfather. 

 You can specify the Descendant selector by putting space between the selectors like this,

Here have a look at below example, 

First of all, have a close look at the aforementioned example, we have one div with class parent and it has 2 child elements h1 and div, and our child div also has one h1 child. Now look at the result, we have 3 headings but only 2 of them are in red colour and why is this? because we used a descendant selector to style our elements, our first selector represents the parent element which in this case is our parent div and the second selector is representing the child elements that are descendants of our parent element. Our first two elements are descendants of parent div while the third one is not and as we’re already using a descendant selector to select elements that’s why our first two elements are in red colour and the third one is not because it's outside of our parent div.

2. Child selector — child selector defines the relationship between one specified parent element and its child element. The child selector can be defined by putting the Greater-than sign “ > ” between two selectors like this,

Lets understand this by using our previous example,

Here we have our div with parent class and again it has 2 child elements, now this time we are using a child selector to select our elements. Here below in the output, you see that only the first heading is in red and the other two are not this is because the child selector selects elements that are a direct child of the parent, and in this case, we have the first heading as a direct child of parent div, the second heading is the child of div that is the child of our parent div thus not making this heading as a direct child of our parent div because it is a grandchild of our parent div.

3. Adjacent sibling selector -- Adjacent sibling selector only selects one element that will come “immediately” next to our parent selector. You can specify this by putting Plus “ + ” between the selectors like this,

We will take our previous example to make it more understandable,

Here we have our div with parent class and again it has 2 child elements and two headings that are siblings of our div with the class parent. In the output, you can see that our third div is in red colour and others are not and this is because our first two headings are inside the parent div which makes our inside elements as child elements. Our div has only two sibling elements first heading and the second heading, and the first heading is the “immediate” sibling element of our parent div while the second heading is not that’s why our first heading is in red colour.

4. General sibling Selector -- General sibling selector works like an adjacent sibling selector but the key difference between them is that a general sibling selector selects every sibling element that comes after a specified parent element. You can specify this general sibling selector by putting the tilde “ ~ ” between the selectors like this,

Again, We’ll take our previous example to make it more understandable,

So our parent div has two child elements h1 and div, and four sibling elements which are h1 elements. Now in the output, the last four headings are in red colour because they are all coming after our specified parent element which in this case is our parent div thus they are all sibling elements of our parent div and the first two headings are not in red colour because they are child elements of our parent div.