Hello in this jQuery tutorial I am going to show you how to select based on odd or even want to say odd or even imagine imagine if I was going to add a few extra elements right here. And these have epic classroom I'll leave this one as it is, that's fine. So we got five right here so 1234 and five. I'm actually gonna say Mikey gonna do is the detective 1234 and five. And you know, I'm actually going to put some more text in there because I think we should have a bit more one element. element, like, okay, save that.
And if now I just reload, click it, print it out, click it printed out, click it prints it, cetera. But imagine if We just want it based on not audio even so if I just put odd cola odd and run it. I'll click on the first one. Clicking the first one and it's not working. Sorry, it starts at zero. So the odd so that would be 0123 and four.
Let me just rename why it was so long to unfold. If I reload, click they didn't work either work on this one won't work on this one or a poor boy who works on free thinking you can guess how to do even replace it with and that works now. Element one won't work. Element two will work Free one word element for will fight. And you could have multiple selectors, you know, one for even one for odd. You might thinking, no, where would I use this I don't even on click, probably not something you can say you probably won't.
But let me just quickly add a table. We'll leave the rest of the code here that's not really disturbing at all. And I'm going to add a quick table. And now you will see we'll see in a moment, the benefit of this or less added table row. And now let's add some information in there. So let's go to the table header.
And I'm gonna add another table header, and I'm just gonna say heroes zero Now, to save time, let's just copy and paste this on the I'll get rid of this. So this is empty changes to TD for table data. And there we go and if I just duplicate this a few more times 2345 you know, including this now in here so for superhero, Batman, DC comic Yoda on controversial fantasy the villain but almost like an antihero in the infinity war movie I would say porn on that's to me Okay, so let's save that refresh and see what we get. So we get this table right here. We don't really have any you know, border applied to it occurred. I'm just going to do an inline border just so we can distinguish these a table.
I'm gonna just pull right through here. Again, these are all just aesthetic changes, just to separate things out. Okay, so I've got this table, I'm sure you've seen on websites where they have you know, alternate rose colored, you could manually add a class but before you want to do is apply some sort of basic CSS to do this. So we are going to do and again you could select it based on class or anything on you know, selected based on T or so dollar to you Colon art dot CSS, I'm going to cover in our how to modify the CSS, CSS and all the different nuances of that in a separate video. So you don't really need to know too much about that at this stage, just that we are going to modify it using the odd even. And on the property on the modifying background color.
And we are going to change it to, let's say red. So if I save that, and I run it to see what we get, I think see it has alternated the colors. And if I change that to zero, it will change this row, this row as default well, it'll be alternating. There you go. That is an easy way of doing alternate colors. But that is one of the huge benefits of using the even odd selectors.
Where I want you to do as an extra test is duplicate this slide. So you have one for even one For all, and for even, I'm going to put one color and I'd want you to put in another color, then you could go step further. And once you've learned a bit more about the CSS modifier in jQuery, choose the text color as well and not just the background. So that's it for this video. Thanks for watching and I look forward to seeing you in the next one.