Understanding Child Selectors in CSS

Hello guys! Welcome to our series, CSS. In our last segment, we had seen CSS Combinators. And learnt how we can select elements and apply specific CSS to them, through parent, child or sibling elements. Our last segment was quite tricky. I hope the practicals that were given in it, you have performed them and checked. If you get any question while the practical or while the segment. You can tell us those on forums.learnvern.com. We will try to revert to all your questions with the solutions. Clear Guys!  Our today’s session is CSS’s nth child selector and first-child and along with first-child, last-child selector.  These 3 things we are going to cover today. So, there will be a basic question that what is the first-child and nth-child? Like it is written here, this selector is used for matching the elements based on their position regardless of the type of its parent. Basically, what happens in this is if we have taken an element, for example p is one element, paragraph, d is one element, division or span is there. So, all these different elements are there, if we use these elements multiple times. For example, if once we add p tag, then 2^nd time, 3^rd time, 4^th time, like this 15 to 20, we have used a lot of p tags. With the help of nth-child like selector, we can select all p tags after a specific occurrence. For example, I want that only the first p tag should be selected and I want to apply a specific CSS. Then we can use this selector. Then I want to give specific CSS to every second p tag,  so that After every 2 p tags I want to apply a formula. Based on some formula I want to apply the CSS. So, all these things that are there specifically to select, that we can do with the help of nth-child. Got it? Before this if we talk about Selector, we had seen Hover Selector. We have also covered selectors like Visible and Active in the segment of selectors. In these Selectors, there are some deep level selectors like nth-child, first-child, last-child which we are going to cover in today’s segment. Here it is written that ; ‘the n can either be a keyword, formula, or a number’. If we see the heading here nth-child and later in the bracket “n” is written. So, what is this “n”?  This “n” can be a keyword. For example, if I want to design only the even or the odd numbers, I want to give it CSS. So, in place of n I can add a keyword. For example, even or odd. If I want that there should be a formula there, number even or odd. If I want that there should be formulas there like in math. Like 2n+1, 3n+2, 1+2n. We can keep those formulas here. Then comes the order number. Okay ! For example, nth-child two. In this, it will be selected only to the second element. In this way, we can make the use of nth-child property. It is used to match the element based on their position within a group or sibling. Matches each element which is the nth-child. So, basically what happens here is it will select every nth-child. Based on its position and on which basis this calculation will happen on keyword, formula or based on the number. Here, even its Syntax is given. This syntax is  colon nth - child in bracket n (: nth-child(n)) this n will be replaced with our requirement based on the selection. Like it is written over here. The “n” in the parentheses is the argument that represents the pattern for matching elements. It can be functional notation, even or odd. It can be a function, like we saw, 1+2n or 3n+2, in whichever way. It can be key words like “even” and “odd” or they can even be numbers. Clear! Now here, an example has been given. In example, there are 2 types of examples. First is the function use and the second is keyword use like “even” and “odd”.  We will perform both the examples. So, 1^st of all we will open Sublime text. In Sublime Text ; html. Example nth-child. (pause) So, this is our program. We will run our program. So, here our program is running. So, to understand this nth-child property with an example, what we will do 1^st is, what we do every time. In the style, we will color the body tag. Background color light-green. Text-align- center. Then here, save and reload. So, now here we will add a few p tags. And we will select those p tags with the help of different selectors. For example, we will take one p tag, “This is a statement”. Now, I have repeated this statement multiple times. Save. Now, you are seeing my statements multiple times. This is 8 times; we will write 2 more times. So, it gets repeated 10 times. So, in total my statement can be seen 10 times. Now I want that, every statement, in that 1^st we will check the selector with even, odd, the keyword phase that we had. So, what will I do for it? Let's say colon. We will write it this way  p colon nth child property (p: nth-child property). In this we will write, for example the color that I have to give is blue. Now, in nth-child, which child wants this effect? I want that one that is on even no.(number) I want to show it in blue color. So, I will write even here and reload. So, you can see that my every 2^nd occurrence of my statement I am getting it in blue color. So, what happens here basically. Every 2^nd, that means that on the even number whichever statements are coming, all of that we are getting in blue color. Now, I want all those that are there on the odd number. I want to give that as well some specific color. So, let’s say I will copy the property and paste it here and instead of even I will write odd. And in odd, I want all the statements in yellow color. So, every p tag which is on the odd number will become yellow in color. So, here on the odd numbers we are getting the statements in yellow color and on the even number I am getting it in blue color. So, this was with the help of keyword. How we can use keyword on the nth-child. So, the nth-child property is not used for one or two but all nth-child property. So, this was our nth-child. Okay guys! clear !  So, we will give a heading here, h3, example using keyword. Okay, so this was our using keyword. We will generate another program where we will use the nth-child property with the help of formula. So, we will generate a new program here, nth-child using function. (pause)  Our 1^st program that was there, we will write the nth-child keyword. Here we will add, nth child using function. Okay. So, here we will add as it the body. Done. From here we will take the same p tags. So, this entire statement we will copy from here. This portion and we will write here “nth-child example using function”. Now, I want to generate function here. So, for that what I will do is p colon nth child( p: nth-child), after brackets. Now, in this nth-child I want that after ever 2^nd one, means after leaving every two, I want to color it, the statements. For example, if the 1^st come is getting colored, after that 2 should not be colored. Then the 3^rd one should be colored and not 2 after that. If we want to do it this way. got it?  So, let’s say I take here color, we will take blue. But for that we will have to generate function. So, for that the function would be something like this, 1+2n, so what will happen here. (repeat) If we take n’s value as 0, so 2X0 will be 0. So, 1+0, what we will get is 1. So, the 1^st nth-child. So, what is the output we are getting? Nth-child for 1. In case of, when n is 0. Our color will be blue. So, when we take 2 here, after 0 comes 1. So, 2X1 is 2. So, 2+1 is 3. So, the 1^st statement we will get in blue color. Then 3^rd statement we will get in blue color. After that if we take 2 here, 2x2 is 4 and 4+1 is 5. So, 5^th statement we will get in blue color. So, if we save this. I will run this program here. Okay. So, here it is not giving that effect. The reason for that is the we have placed the n later. So, here we had written 1+2n, here we will write it in 2n+1 format. As soon as we reload, we get our output. When we use the nth-child property. At that time in the function the n should come 1^st. After that the number should come. So, I will modify this function a little. Here, if I do n+2. We are getting all the statements in color. And here if I do 2n+2. You can see that we are getting our every statement in color. If I do 2n+3 here then we are getting this kind of output generated. So, different, if we do 3n+4 then after every 2^nd statement, we are getting it in color. So, based on the function we will get our output designed. So, this is the property of our nth-child property, where we can use the keyword like even, odd. We can also use the function like 3n+4. So, this was our nth-child. Okay guys! So, nth-child property is very useful for use, we have explained it with the example of the paragraph. Nth-child, when you are working with a big table, with html table in which a lot of row and columns are available. In that case, if we want to highlight a particular column. Then we can make use of nth-child property. For example, we want to give a specific CSS to every 3^rd column. In that case we can make use of nth-child property.  Every 3^rd column or every 3^rd row. That will be highlighted for us and for that a specific CSS will be applied. So, nth-child is a very important selector. okay!  Next, we will go ahead with our slide. We have checked this example with the help of function and keyword like even and odd. Next is our first-child and last-child selector. First-child selector is used to select the specified selector, only if it is the first child of its parents. only our first child will be selected. The same way, it's opposite; The last-child. The last-child selector matches every element that is the last child of it’s parent. So, what is the difference between the first and the last child? The first-child will always select the very first element from our selection of elements and the last-child will select the very last element. So, we will see this example together. Here html, example, first and last child. Save, first, last child, html. In this, we will take a few p tags, we will copy this entire portion. And here, it will come “first-child and last-child example”. Okay. So, save.(pause) So, we are getting the output here. We will zoom into this. Style and in it, body. Okay!  We are getting the output as per our requirement. Now, in this we will select only the first-child and the last-child. So, here it will be in this way. P, first-child, and in the first-child we will write color, blue. Same way, p, last-child, in this we will write color, let’s say yellow. Save and reload. (repeat) So, in this we are not getting the output. Which means that here there is a property that gets applied, which we have to check. So, what is happening here guys? Here we have taken a h3 tag and this h3 tag is overwriting the very 1^st occurrence of p. To see that we will see, if you comment this. So, you can see that our 1^st p tag statement we are getting in blue and the last p tag we are getting in yellow. As soon as I uncomment the statement and reload it, I am getting my last statement in yellow color but I am not getting the 1^st statement in blue color because our h3 which is a block level element, it is avoiding the property to be applied to any p element. In this case what we will do is, we will remove this h3 tag and we will add h3 in one div. Okay. It is not working. So, what is it that we are getting to know ultimately? Our 1^st occurrence is getting overwrite by h3. If I remove these two and place them up. I am again getting its output. So, what are we finding out with this? A limitation is found out that the h3 tag that is there in our entire statement. If exactly after h3, 1^st-child property is getting applied that will not be applicable on p tag, that is what we found out. So, first-child and last-child, it is getting applicable, it is getting executed. But where it doesn’t work? When any h3 or heading tag, not only h3. Any h tag if we add. In that case it doesn't get applicable. So, this was our example of first-child and last-child. First-child we have colored and last-child we have shown in yellow color. We will go on the slide. We have understood this with Syntax, with example. clear guys!  So, guys in today's topic, nth-child selector and first-child, last-child selector, we have covered these 3 things. So, guys in today's segment if you have any difficulty or question, if you have any doubt. You can tell us on forums.learnvern.com. And I request you to perform it yourself and check. And if you are getting any question while performing, you tell that as well to us. We will get back to you at the earliest with the answers to your questions. (repeat) In our next session we will see the important properties, exclamatory signs, then important, when do we use these properties.