Understanding CSS Combinators

Hello guys! Welcome to our series, CSS. In our last segment, we saw Pseudo Elements properties of CSS. How are these elements and how are they used such as first-line, first-letter, before, after and Selector? We had generated an icon with the help of after. In the entire segment we had in total performed 5 practicals. If you have practices, it on your own and if you have any questions in it or any difficulty has come or you have any question in segment. You can tell us on forums.learnvern.com. We will revert to all your questions and queries with a solution. So, the last segment was on Pseudo Element.  So,today's segment is on CSS Combinators. Now, what actually is Combinators. Whenever we want to select any element. For example, an element or  there is an element inside the element means there are multiple elements in the hierarchy. So, in which different  ways we can select our element that we can identify through combinators. For example, it is written here, CSS Combinators clarifies the relationship between two selectors, whereas the selectors in CSS are used to select the content for styling. Now, what happens with the help of selectors? When we had seen selectors ahead. Like ID Selector, Class Selector, Universal Selector is there. So, what did we see in all these selectors? Element selector is also one selector. With this our particular element gets selected. For example, If I have given someone an ID in my webpage, ABCD. So, if I add ABCD with a #.(hashtag) So that element of mine gets selected. But apart from this, in a different way, based on some relationship, based on the relationship I want to perform any selection. With what help we can do that; we can do that with the help of combinators. There can be more than one simple selector in a CSS selector. But, between these selectors, we can include a combinator. It means that we have an element, ABCD. Now, I want that in any of my elements, where all, so and so class has been placed, there CSS is applied. I want that apart from that element, if anywhere else this class has been placed, there the CSS should not be applied. In that case, we can perform combinators. clear guys!   Let’s say, in my one division, I am getting 2 different classes. But I want that, there should be one more CSS to overwrite that class. So, we can do that with the help of a combinator. Then comes, like something has been written here. There are four types of combinators in CSS. It means that based on these types, we will 1^st identify the relationship and based on that relationship, we will apply the CSS. It means that if we have a Selector. Selector’s CSS will definitely be applied. But along with it, our combinator CSS will also be applied. But that will be on a relative basis only. We will understand it more when we do an example. How many types of combinators are available with us? So, the 1^st is General Sibling selector, then comes adjacent sibling selector, child selector and Descendant Selector. So, these are our different selectors and these are the icons with whose help, with the help of these operators we can perform the selection. Clear! So, 1^st of all we will see the general sibling selector. It uses the tilde sign as a separator between the elements. Let’s say we have 2 elements div and p. So, in one div, all the p elements that are coming. With the help of this selector, if we have to find out the relationship and do something. So, there after the div, I will use this tilde operator of mine and again I will place my selector p. It selects the element that follows the elements of the first selector and both of them are the children of the same parent. It can be used for selecting the group of elements that share the common parent element. What does this text indicate here ideally? Let’s say, we have some element and in that element all the child that are coming, with a particular element, that CSS will be applied to all. It will be applied to whoever we have selected. got it? For example, I take h1 in the element than my general sibling selector operator. I will take p here. After my h1, all my p elements that will come, my CSS will be applied to all of them. But, let’s say in the middle of that h1 or later, I place one division tag and in that I will add another p tag as well. So, to those p tags these CSS will not be applied. This CSS will be applied strictly to those who would be my h1 siblings. Siblings means, for example in general terms if we talk about brothers and sisters, we call them siblings. So, if I have one element, which has a parent element. Of the same parent element, there are child elements. So, all those child elements would be each other’s siblings. okay! So, I will define one of the elements here, from any of the one element from the child. This will be applied to all the siblings but a particular element. So, let’s say, my h1 and p, I have multiple p elements which are my h1 siblings, the property will be applied to them. We will perform a practical for that to make it more clear. HTML, “Example General Sibling Selector”, general sibling selector. Okay. So, what I will do is I will generate one h1 tag. In h1, I will write “This is an example of a General Sibling Selector” and this is my icon. Okay. Save. Okay.(pause) So, this is our program of General Sibling Selector. Now, we have taken h1, now I will add a few p tags below like “This is the p tag that will gonna affected with CSS”. Okay. Save. So, here my p tag has come. Now, I will add a few more p tags like these. I have added 4 p tags. After the 1^st or 2^nd p tag, if I add a division. And in that division, I write “This is a div tag” In this div, also I will add a p tag. We will write here “This is a p tag that will not gonna be”. Okay. Save. Reload. So, you can see that there is a p tag here, then again, a p tag, then a div tag. Then comes, this is not gonna affect. Here, we will again add one element. This is a div tag. So, we have got 1,2,3,4 and 5 p tags. So, now with the help of the general sibling selector we will add the CSS. So, let's say, 1^st of all we will take the style. In the body we will take text- align, center. Okay. Now, we will take h1 then our sibling selector and p. So, now I want that my p siblings of h1 all should look in blue color to me. So, let’s say I take here color, blue, if you want, you can increase it, font size- 15px, that’s it. Save and reload. Instead of 15 we will do 20. You can see that these 4 selectors of mine. Four on p tag. To them my CSS is applied using this General Sibling Selector. But my p tag inside the division, it is not applied to that. okay! so, Why has this happened? We will explain it in paint. First of all, We get the body. Okay, so this is our body tag. In the body tag, 1^st of all  we have h1. So, h1 is the child of our body. Then, you can see that there is p tag here. So, the p that is there, we have totally placed 4 ps.(pause) We have placed one div as well. In that div, we have placed a p tag. So, what is happening here, this p that is there, then this div is there, this p and this p. okay!  All these lines that I have made, all are the body of the child. Body is their parent element. But this p tag that is there, that is the child of this division. So, this div that is there, it is h1’s sibling. In this line, all that we have shown, all are our siblings and this is our parent element. So, here the p that is there is div’s child. So, div is the parent. So, this p of ours is not the sibling of h1. So, which selector we have performed here. All the p tags of h1 which are the siblings of h1. So, these two and these two, these 4 that are there, these are our h1 siblings. Div is also our h1 sibling. But we have not applied any CSS to it. So, it is not active. But we have applied the CSS to all the siblings P of H1. It is not applied here as this P is not the sibling of H1.clear guys!  So, I hope it is clear to you how this sibling selector works.  right? okay! Next is our adjacent sibling selector. It means a selector which comes exactly after it. Means 1^st sibling, only to that the CSS is applied. This sibling selector selects the adjacent element, or we can say that the element which is next to the specified tag. So, what will we do for the adjacent sibling selector? We will paste the same program over here. Adjacent, okay. Now, we don’t need this extra div tag. We will only write this p tag thrice. So, our 1^st p tag will get affected. But our other two will not get affected. So, what will happen next? We will replace it with a + sign. Now, we will run this program. So, you can see that our 1^st p tag only has got affected with the CSS. But the other two, did not get affected. Adjacent means that wherever we are applying CSS, the element exactly after it will get its effect. Means the very 1^st one. So, here it’s icon will come here +. Here, we will change. Okay. So, adjacent we will select with a + sign. General sibling you must have seen get selected by tilt sign. Adjacent meaning, I am repeating. The very 1^st element that will be there next to the selector, that itself will get selected. We had selected the p tag that comes just after h1. You can see that the 1^st tag after h1 has been selected. It has got CSS. The p tags after that are not getting our CSS. So, this is our adjacent Sibling Selector. If we see here, the 1^st p after h1, only to that CSS will be applied and not to the p after that. clear guys! great!  Next is our child selector. Child selector is selected with the help of this. as many child are there of parents. To give all of them a common CSS, we apply a child selector. It means that in this example of ours, I want that all the ‘p’s after the body will get the CSS. But h1 and div who are its child, even then they will not get but only p will get. P will get the CSS. In that case, we can perform a child selector. It selects the direct descendant of the parent. This combinator only matches the elements that are the immediate child in the documentary. After the body all the immediate child that are there from h1 to p, all are immediate child. And this p tag that is there, is not the immediate child. Div is Body’s child and p is the child of Div. So, div is performing as a parent here.  It is stricter as compared to the descendant selector because it selects the second selector only when the first selector is its parent. It means that when the 1^st selector is parent only then the second selector will select it. The parent element must always be placed at the left of the greater than sign. If we remove the greater than symbol that designates this as a child combinator, then it will become the descendant selector. okay! So, if we have kept this icon. So,as many combinations of selected relationships they are getting, there the CSS will be applied. If we remove this icon, it becomes common, all that comes after it. So, in that case even this will get the CSS. Got it?  We will practically perform it. Let’s say, I place a program here. This selector’s name is Child Selector. We will replace the Adjacent Selector with Child. Actually, we should copy this program. This is with more elements, Child Selector and this is our icon. Our icon had come. Now, what we will do is we will take the body tag here and then our Child Selector’s icon.  Now, all the Ps will get affected but not the one that is there in div. Save, child Selector. Okay. Now you can see that we are getting almost the same output like the 1^st one but this is different. How different is it? So, we have performed it with the help of Child Selector, we have not selected any siblings. So, here the h1 siblings that are there, are not selected. Here in the body tag, how much ever p comes, immediate p. If we see in this, under the body how much ever immediate Ps are coming, to them this CSS is applied. It is not applied to this one. So, to these Ps we have applied the CSS. This P is not the immediate child of our body. So, to this p tag the CSS is not applied. Now next, We will go ahead with Descendant Selector. In Descendant Selector all the elements that come later, to all these CSS are applied. Immediate child is not important here. If we do the modification in our program, this p tag will also get selected, if I remove this icon. So, let's say if I copy, paste this, this is our Descendant Selector. And this is our space, space, okay, so all our Descendant Selectors have come. So, here even this p will get affected. Okay. So, we will remove this and we will keep only the space. Descendant Selector.(pause) So, you can see that all the p tags that are there here, can get selected by Descendant Selector. So, in the Child Selector what are the changes that we have done. We have just removed this item and kept a space. With Descendant Selector what happens is that inside the body as many p tags come, this CSS will be applied to all those selectors, even though through the multiple parents. You can see it in the graph, that after Body, div comes and after div p comes. Still, to that p, means to this p tag also our CSS has got applied. So, this is our Descendant Selector. clear guys! The difference between the Child Selector and the Descendant Selector is that it applies CSS only to the element that comes immediately under the child. That is the reason why CSS is not applied here. In Descendant Selector, it does not happen immediately but after a particular selector, means after body as many ever selectors will come, means as many child will come, to all this CSS will be applied. Okay, guys! The 1^st one is General Sibling. General Sibling means that it will be applied to the coming siblings. Adjacent sibling means exactly the next one. Child Selector means immediate child only. Descendant means all the child. So, these were our different selectors. How we perform the selection with relation to the parent or the sibling and how based on that, we apply the CSS. So, guys. Today’s topic is a little tricky to understand, it is a little difficult. Till the time you don’t perform it’s practical, till the time today’s topic will not be clear, So, I will request you that, today whatever has been explained to you. All that practical you perform, see and check it. By doing it practically, you can be strong in it. So, I will request that you perform it’s practical. If you are getting any question during the practical or you have any question or query in today’s segment. You can tell us on forums.learnvern.com. We will revert to all your questions with solutions. Our next segment is on a very important topic, which is the nth child property and first child property. These both are selectors like Hover, Visible and Active. Similarly, these are the new selectors which we will cover in our next segment. Thank you.