3.2 Column Pseudo-Classes

Hello and welcome back to the CSS of the future. In the last lesson we started talking about table columns in CSS. As we discussed the column combinator selector, which was the double vertical pipe selector that allowed us to select specific. Columns in an HTML table. Now to be honest, Im not too sure that the combinator selector is going to make it much further in the level 4 specification. But in this lesson, Im going to talk about two pseudo classes specific to columns that are much more likely to stand the test of time. And those selectors are those pseudo classes are the nth column pseudo class and the nth last column pseudo class. Now those might sound familiar to you if you're familiar with CSS 3 and the nth child selector and the nth last child selector. The nth column and nth last column work exactly the same way, except they're obviously specific to columns instead of just any elements. So let's take a look at what that's going to look like. In your project files folder, if you take a look in your selectors folder, you should find a file called morecolumnsstart.html, and it's a simple page with a four column table. Well let's take a look at that in our html, and this is set up very similar to our last one. We have, a call group with four columns in it, then we have a some headers and some empty TD tags. So, let's jump into our CSS now let's take a look at something we might be familiar with, the nth child selector. So let's say that we wanted to select every other column of our table. We could do that using td:nth-child, and then inside parentheses here we would pass a value (2n). This would select. Every other column. Now if we just entered in a value of 2 here, instead of 2n, it would just select the second column. Let's take a look at that. So let's give it a background color of #ddd, so it'll be like a medium light grey color. And let's save this as. Morecolumns.html. So, we'll replace that, and I'm going to jump into Chrome again and refresh. And of course, we need to get rid of the hyphen start here so let's do that. We're just looking for morecolumns.html. And there we go. Now you see that our second column has been selected. And the way we did that and again, this current way of doing it. As we use the nth child selector. But in CSS4, if the nth column selector gets approved in the final draft, then we should be able to do something very similar, simply by replacing child with column. Now we currently don't have support for this in any major browser, so if I were to save that and refresh our page that would go away. But it would give you this same, in fact, we would get rid of the td altogether. You don't have to specify td or th or whatever. If you're using nth column, it will target the entire column as long as you have your columns set up here. So you should be able to access it this way. If the current draft gets approved with this nth column pseudo class. So if we save that again, and refresh, we're still not gonna see it. Because current browsers don't support it. But it's the exact same thing as typing td, colon, nth child. In fact, we'll go ahead and leave that here. If we were to select that, copy it. And then paste it, and I'll change nth-column to inth-child and make sure we specify td tags there. This is the result that we would get, so again, this is the current way of doing it, and this is the proposed way of doing it with the nth column pseudo class. Now we could also put other values in here. Again, if we wanted to highlight every other column, we could put 2n here. And we'll go ahead and do that for the nth column as well, and let's see what that looks like. Command S to save it, refresh, and now we see that every other column is selected. If we wanted it to be every third column, we would use 3n. We can also do every other column. But if we wanted to start with the first column instead of the second one, we could add an offset in there by typing +1. So I'll go ahead and do that here, too, even though it's not really going to make a difference down here because nth column isn't selected. Let's go ahead and save that and refresh. And now we see that it's starting with the first column. Now, what if we wanted to make sure that we started with our last column. What if we wanted to make sure, 100%, that our last column was going to be gray? But we didn't know how many columns we were have. Maybe this was being built out, dynamically. But if we wanted to make sure that our last column was gray. Then, instead of using the nth child selector or pseudo class. Then we could use nth last child. Or in these level four specifications, the nth last column pseudo class. So let's see what that would look like. Instead of nth child here. In fact, I'll go ahead and leave that there. And we'll just start over down here. In fact, let's look at column instead of child since we're talking about level four here. We'll point to nth last. Column and we give it the same value. 2n plus one. Got to spell that out right. And that would target starting with the very last column and skipping a column. So, it would give us the same effect except it would start with the right and move to the left and every other column would be highlighted just like it is with the nth column. So if we were to comment all of these out and just leave this nth last column here, and let's give this a background color of pound #eee. Save that and refresh. You'll see that it's not working obviously, because our nth last column pseudo class is not supported yet. But we can do the same thing here with inflash child. So we just need to put a TD in front of it. To specify we wanted our children to be TD tags. And we would change column to child. And that would give us the effect that we're going for. So that's the current way to do it. But again, in the level four way of doing it, if it gets approved, we would be doing it this way using nth last column. So, as you can imagine, we can do any combination of these. If we were to leave this first set uncommented, then we have 2n + 1 starting from the left and going to the right. And then the 2n +1 starting from the right and going to the left. The first couple here starting from the left heavy value of ddd and the second two of a value of eee, so we should see some alternating colors here, if we have an even number of columns. Now if we have an odd number of columns this would override each other, but since we have an even number of columns, we can save that and refresh, and we can see that every other column is a different color. Now, naturally you wouldn't do it this way if you didn't know how many columns there were going to be. You wouldn't do an nth child and an nth last child. Instead if you wanted every column to be, every other column to be one color, and then maybe the even numbered columns to be a different color then you can set nth child to 2n to a certain value and then 2n + 1 to a different value. Either way, those are the column psuedo classes that we can hopefully look forward to using once the CSS level force specification reaches it's final drafts. Thank you for watching and I'll see you in the next lesson.