Check out a free preview of the full CSS In-Depth, v2 course:
The "Structural Selectors Demo" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows a complex example of creating a U.S. flag with structural selectors

Get Unlimited Access Now

Transcript from the "Structural Selectors Demo" Lesson

[00:00:02]
>> Estelle Weyl: Okay so, here I created a flag with a structural selectors. So basically the HTML looks exactly like the previous page, which is where you were doing the cells, it's a table. Now, this is a stupid pet trick, do not try this, do not put this into production, but it was just to show that it's possible.

[00:00:23] So the selectors I used were, I took all the table cells and I made the color white, with a background color of white. And then I said, every TV table cell that comes, what does tilde mean?
>> Speaker 2: Sibling?
>> Estelle Weyl: General sibling, so all the tds that come after, the cell that is the 8th of its type.

[00:00:52] So that would mean the 9th, 10th, 11th and so on cells, but not the 8th, just the 9th, 10th, and 11th, and 12th and so on for every odd row. So every odd row, the ones that are this ninth cell afterwards. And starting with the 9th row, 2n + 9, so starting with 9 and 11 and 13, every single td make the background red and a color red.

[00:01:28] Now I'm going to change this to green just to show you, I'm just gonna change the color to green, green blue nine zero. You see, it's say's cell, see, I marked all those, right?
>> Estelle Weyl: So let's go back to 9.
>> Estelle Weyl: So I mean, every cell in the rows in 9, 11, and 13 and for the rows 1, 3, 5, 7 only the cells starting with the 9th make them red and that is the striping.

[00:02:12]
>> Estelle Weyl: And then I said starting at the end, so nth last of type, n plus nine, so starting with the 9th and going in and starting at the seventh row going up, make it blue. And in those same ones, add a star with generated content, that's what this is right here.

[00:02:38] And for the odd ones,
>> Estelle Weyl: Right? Make ' position them a little bit over so that they're not centered. Stupid pet trick, but I just wanted to show that you could actually target, start from the bottom, go up to the 17th one from the end, or something like that and only highlight the ones before it.

[00:03:02] So if you want to highlight number one through five.
>> Estelle Weyl: Of list items, one through five, how would you do it?
>> Estelle Weyl: You would actually have to say one, two, three, four and five, unless you knew how long your thing was and you can say, 27 from the end, go up.

[00:03:28] Or you could put the class on all of them and then remove the properties and values from the sixth on. So if you wanted to say just the first five are bold, you'd say LI bold, LI nth of type.
>> Estelle Weyl: N plus 6, so starting with the sixth one, font weight normal it would just override it.

[00:03:55] So here's the same exact thing done with simpler HTML. In this one, I basically said make the whole thing striped, cuz that makes more sense. Who would actually start off with, just make the whole thing striped and than add the blue, which is a simpler way of doing it, but we're not gonna cover that one.