 Hi there, my friend and friends. Did you know it's incredibly easy to select ranges of content with CSS? I recently used it on a video to place a whole bunch of images on a grid that we can see here because I could have selected each individual one and placed it where I wanted it to, but it's a lot easier to select ranges of content and get them on the rows or columns that you want. And just to simplify things, I'm going to use this demo here instead just because it's easier to visualize when we have colors instead of every image looking exactly the same. And we're going to take a quick look at how you can do ranges of content. We're going to start with using nth of type that we're going to see a drawback with nth of type but then a solution that we can use with the new nth child syntax that we have that not a lot of people know about. So here I just have my boxes that are these red things here you can see they have the border on them just so we can help visualize like I said. And let's come and we're going to say box and we're going to do an nth of type and you might already know if we can do like a 2n. And if I do a 2n then we can say that my border color is going to be a different color. So here I'm just going to do a lighter shade of blue than we have on the outside and you can see that those have changed them because we've selected every second box and it's changed the color or I could make this a 3n and then I'm choosing every third box and I'm changing the color of it. Now let's say you wanted to select every element in this column here. That could be a little bit tricky but we could just do a 4n to select every fourth one but then we can tell it to start counting from the second ones. We're starting at the second one and then we're going 1 2 3 and then the fourth one 1 2 3 and then the fourth one right there. So we're selecting that entire column. I want to make it the last column I just do to the starting at the fourth one. I want to do it from the first I just do a plus 1 and it moves over to the beginning. Now this isn't really a range of content I realize that but we're going to get there in a second but this idea of being able to select a specific column is going to be really important for what we want to do here because what we can do is instead of doing every fourth one we could actually say n and then say plus 2 and then means we're going to select every element starting after this because this is like same as 1n so we're selecting every element but starting at the second one or we can say starting at the third one or we could say starting at the fourth one and then we're selecting every element from that point forward. But with CSS you can also do this backwards and you can do that with a negative n or a negative 1n and then it's going to start counting from the back so we're starting at the fourth one and then we're counting backwards and going the other way so you can actually select preceding siblings this way which is kind of interesting as well so starting at the fourth one counting backwards and if I wanted to go from the sixth one I could start at the sixth one and count backwards from there so go to the sixth one and select everything that comes before it and where things are really interesting here is you can combine these two things together with two different nth of types so we can say that we have an nth of type as well that's going to be a n plus 3 let's say and so we're going to match anything that starts at the third one and ends at the sixth one because we have to meet any box that meets both of these criteria so it has to be anywhere starting at the third one going all the way to the sixth one we get a nice range of content there I think that's really cool. Now why would this be useful to do well if we look back to when I was setting up the grid here I needed to position images in a specific way on the grid and so to be able to do that I was just selecting from the first image going all the way to the fourth one and I could select that entire row of images and then I could select the next row of images that I wanted and I wasn't changing border colors I was putting them on specific grid lines to be able to do this just because of how I had everything set up but then I could start at the fifth one and five six seven we could go all the way over to the eighth one and let's just change this blue I don't have a variable set up for green but we'll just change it to green so we can see that we've set that up and then if I wanted to select those ones I could do it as well going from the ninth, tenth, eleventh and up to the twelfth one. Now there is one limitation of this which is if you come in and this is just a limitation of how nth of type works and I'm going to come on this one here and I'm going to call it not a box not a box because we're going to make the sixth one not a box and you can see I have some styles set up so it's spanning to and we've rounded corners to make it it's not completely a box because we have round corners on it right but this screws everything up because now as you'll see it's selecting this one down here and that's just because of how this is selecting different ranges of content where it's selecting it based on the you know it's looking is the box the fifth of type but when we say of type we're actually saying the fifth div so this one is a div that happens to be a class of box that is meeting the criteria this one isn't so it's skipped over this one is and this one is as well even though it's not really the box that I want it to be in a way so I'm going to comment this out so we can explore another one just to say right now if I change these from nth of type to nth child it would work exactly the same basically just because we only have these things in here obviously nth of type and nth child are a little bit different so if I had other content you know something that came first nth of type would probably be what I'd want so generally I tend to use nth of type for this type of thing where I'm selecting this but nth child would work the same way but let's say we did box and we're gonna see because nth child does have one thing that nth of type can't do and that's what I want to explore here so let's say I want to select these two here and this column here I want to select my second column and my fourth column well if I said nth child to n we can see this let's just do a border color of green on here so we can see them and it's going to select every second one the problem is that throws everything off and if we did this with nth of type it would be the same thing nth of type we're going to have the exact same pattern coming on there let's just make it yellow so we can see that it it's still working so with either one of these it's not going to work but if we use nth child now I can say nth child to n of box and it's only going to select the second of each box so it's not selecting this one we're getting the second box not that one the third box not that one this is the fourth box not that one the fifth box not that one the sixth box every second box so we're skipping this entire thing as one element rather than skipping the way it was here or was doing you know it was counting this sort of as an element but then that didn't meet the criteria so it was yes no yes no and then this is no but just because it's not the right element but it doesn't count so we're getting to the negative here as well so just every second one but it's not the nth child so it's not matching so I'm just you know we can do of box now and we can actually select things based on their classes as well and there's a whole bunch of possibilities that do open up just know that the this is a lot newer so the browser support isn't as good this you could these types of ranges that I would look at first those you can use anywhere you want no problem at all a link to can I use in the description if you want to check browser support of the syntax that we see right here though now if you are interested in seeing a bit more and how I did this where it's you hover over the name and it highlights the the person or if I highlight the person it also highlights their name as I said I did a whole video on this and it's with CSS only no JavaScript involved really actually surprisingly easy to do so if you'd like to see that video it is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome