This is Sasha and welcome to another CSS training video where I share with you how you can modify and manipulate your business website when it comes to CSS code or even if you want to learn a little bit of CSS, I’m going to show you how to do it.
Today, we’re going to take a look at the nth-child selector and show you how you can do cycles and look at increments within those cycles as you’re selecting certain things. Let’s take a look at this selector.
I have a basic website. What we’re going to do and the best way to explain this is to take a quick look at this table. Let’s say I’m looking to create a cycle that every specific row is a particular color and, of course, this will depend on what row you wanted to have – to be a specific color.
Let’s say that, okay, we want to target every row and every other row is a certain color. Well, what you could do and just the way that it works is since we know that every row is the TR tag which is the table row, and what we can do is create the nth-child selector, and that’s how you primarily write it.
What you can do is go ahead and say, “Okay. Well, I want them even to be targeted.” You can go ahead and write in your rules for the CSS. If I want the background color to, let’s say, let’s make it green. In this case, I can go ahead and write that property.
You see that every even row, so here for example row number 2, row number 4, 6, 8, 10 and 12 is selected. Now, you could continue to do this and say, “Hey okay, well, I also want the color to be white, okay?” There you go.
That means the color is also white and that’s another way to continue to write this rule and you can, you know, go ahead and write as many states as you need. But the point here is your targeting all the even ones.
If you wanted to target the odd ones, what you could do is, let’s duplicate this and we’ll also focus the odd ones, but the odd ones will make red, okay?
In this case, you can see here we have kind of like a candy cane red and green scheme going, and this is a great way to organize a table maybe not in those particular colors, but you can see how this property works. Let’s go back to the other one and show you some more examples.
Here I have the even version, if I go to the odd version, you can see then it goes in this row or in this way. Now, the other way that you can use this is it’s pretty advance where it’s mainly targeting a cycle and then the starting point of a period. What you do is you type 2n and then +0, okay?
What this does is it’s starting every second one, every 2, it goes on and happens. It’s kind of like doing and even selector at this point. But here’s why it gets interesting is because you could do it every 3, okay? You can see now every third one or third row – so you could see this is the third row then this is the sixth, the ninth, the twelfth or you could do it like every fourth one.
You could see every four rows and here’s where things get interesting. Let’s back to every third one. But here, I could start it with a +1, okay, which means it starts on 1, it increments on 1 and then it goes every 3, okay? Then what it does if you go to 2, you can see how this shifts to the second one.
If I start it on the third one, then it goes there, okay? If I start it with the fourth one, I could start it there, and you see how that continues to shift and shift, okay? If I did it every 4 with a +0, you could see we go with the fourth one, the fourth and the fourth one. If I did it that fourth one and went, let’s say, -3, let me see, you can see there, it starts at the very top and then continues moving through.
You can play around with these selectors with the cycle plus the starting point with the minus or a plus, and it’ll work either way. Now, I find this is also very good when you do things like – like on my website, one of the things that I do is like these courses. When you look at classes, I have a clearing of every 3, and it clears the field, okay? Every three boxes right here, we remove it to go to the next line.
In order words what happens is we go ahead and, you know, do a clear both. Okay, but we do it on the third one starting with, you know, 0 or something like that. We do the code based on that. But you can do this for all sorts of things. You know, you could make things a background color and underline, you know, a table row is just a nice little example.
You could make some things bold, you could make it the third paragraph, I could target, let’s just say, the paragraph here and you can see here, here’s a paragraph which is the third one and we’ll see if we have any others, no, we don’t or we could just say, “Okay, every even paragraph.” and you can see there’s the first paragraph, there’s the second paragraph, so that one is, you know, green background and then fourth one as well.
You can see how this can be really powerful to use in certain codes that have a loop or cycle especially things from databases really, really powerful to stylize your code simply by just doing these even or odd or you could use like a variable like a 3n+1 or something like that. That’s kind of the beauty and the power behind these nth selectors. I hope you find them very useful.
