DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element.
[00:00] These last pseudo-classes have to deal with the location of the element in the DOM hierarchy. Here, we're back to an unordered list of mostly links. As we scroll down, you can see I just took off some of the styling of the list.
[00:13] Then here is our first pseudo-class. This is the first child. I am changing the background to this blue color. So you can see the first child -- it's kind of a purplish color -- in the list element is going to be this purple, and this last one as well.
[00:29] So if I go ahead and comment these out, and save it, then we can look at this next one. We got first child and last child, then this is the nth child. Here, I passed in the parameter of two, which just means the second child.
[00:44] If I went ahead and put this back to one, this would be the same thing as saying first child, so I'm going to go ahead and put it back to two, because that makes more sense. We can pass through more complex patterns to this nth child.
[00:58] Here's an example of 2n. You can see that it's going to be all of the even indexes. The indexes start with one -- egghead would be index one -- but the n counting actually starts with zero. It would first pick the zeroth element, but there isn't one in this list. So then it will apply to not one but two, not three but four, etc.
[01:21] If we want to get the odd elements, then we can say 2n + 1. That way, it'll choose the first element, the third and so forth. You can get more complex with this. This pattern will actually pick the first four elements and apply the style to it.
[01:39] The reason, again, why it does that is if we pass in zero for n, it would be -04 which is the fourth element. Then it's -1 + 4, which is the third element, and so on. You can also do something like this, which would be everything except for the first three elements.
[02:00] So you can do some interesting stuff with the nth child, you can make some complex patterns. There's some other pseudo-classes that you might find helpful. There's the nth last-child pseudo-class, which is the same thing as nth child. It just counts from the bottom going up.
[02:15] This only-child applies to every element that is an orphan. Then there's only-of-type, which will allow you to target a specific element type. So if you wanted to get a paragraph that was all alone, regardless of what other sibling nodes were around it, you could use this.
[02:33] If you wanted to get last-of-type, again, if you wanted to get the last paragraph of the section, you could use this one. Then you've got nth-of-type. It has the same pattern that you can use for the nth child, and same thing with nth-last-of-type. It does the same thing, but it's counting backwards up.
[02:50] So you can get really complex with some of the pseudo-classes. In fact, some of them make it a little bit hard to read and maintain the code, so you're going to want to be careful with these. Just use them where they make sense.