3.1 Selecting Table Columns

Hello, and welcome back to The CSS of the Future. One of the most inflexible features of HTML has got to be the way that it handles tables. Targeting table rows with CSS, for example, has always been pretty easy, but it gets a little trickier if you want to target a given column. In this lesson, you're going to learn about another new feature in the CSS Level 4 specification that would allow you to target a column almost as easily as you can a row. So we're gonna start by taking a look in Finder, in our selectors folder of our project_files folder. You should find a file called column-start.html. And we can open that up in Brackets or whatever text editor you're using, and here we can see a simple table setup. So we have one table row here that has some table header tags in it, and then the rest of our table rows which just have spaces in it for now. We're not gonna really put any content in here. I just want to illustrate how to select columns according to this new specification draft. So you'll see that we have a col group set up just before all of our table rows. And in it, we have four columns that have been defined. Our second column, I've given a class of blue so that we can target that particular column separately from the rest. So ideally, if this particular selector finds support and makes it to the next level of the draft, then we might start seeing some browser support for this. But for right now, there's really no way to test this in a browser. But ideally, we'd be able to target just this column with a class of blue and have it affect the second item in each of our rows, the second column in each of our rows. So let's see what that would look like according to the current specification. So we'll go up to our styles here, skip a couple lines, and here's what it would look like. We would point to the class of blue which we gave to that column. If we wanted to, we could point to col.blue, but I'm just gonna keep it nice and succinct. We're gonna type .blue to point to the blue class, and then we're gonna use two vertical pipes. So if you don't know where the vertical pipe is, it's Shift+Backslash, which should right above your Enter or Return key. Put two vertical pipes there and then the item you want to select, which in this case is gonna be a td. If you wanted to select the th's as well, you could type .blue th. That way, all of the table headers and table data tags would be selected for that second column, but I'm just going to target the td tags here. So any td that matches up with that blue column is going to be selected if we do this, and we could give it a background-color of blue. Now again, if we were to test that, let's save this as columns.html. So if we were to save that, go back into Chrome, and then switch over to columns.html, we're still not able to see that. But ideally, if it did work, let me show you what it would look like. There's another selector that you might have been already wondering about, why aren't you just using this? And that's the nth-child selector, which is a currently available selector. So we could point to td:nth-child, and then in parenthesis type which child we're talking about. We're talking about the second child, so any td that is the second child of its parent we could give a background-color of blue. Save that and refresh, and this is basically the result it would give us. The difference is we can point to it in a way that seems to make more sense, in a way that seems to read a little bit better than nth-child(2). Because what if you decide to wanted to change which column was being highlighted? You'd have to go back to your table, count how many columns over it is. This way, by giving our column a class name, we can just move that class over to another column or add that class to another column, and that column would take on whatever rules we applied here. So again, this is another CSS selector that is not currently supported on any major browsers. But that is the current syntax of what it would look like if that selector gets approved in the Level 4 specification. So thank you for watching, and I'll see you in the next lesson.