CSS Selectors in Depth
Target Custom HTML Element Patterns with DOM Hierarchy Pseudo Classes in CSS
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 (odd or even).
Instructor: [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 most siblings. As we scroll down, you can see...I just took of some of the styling of the list.
[00:13] Here is our first pseudo-class. This is the first child. I'm changing the background to this blue color. You can see the first child. It's kind of a purplish color. The first child in the list element is going to be this purple and this last one as well.
[00:29] If I go ahead and comment these out and save it, then we can look at this next one. We got first child, then last child, and this is the nth child. Here, I passed in the parameter of 2, which just means the second child. If I want to head and put this back to 1, this would be the same thing as same first child.
[00:49] I'm going to go ahead and put it back to 2, because that makes more sense. We can pass through more complex patterns to this nth child. Here is an example of 2n. You can see that it's going to be all of the even indexes. Indexes start with 1, egghead would be index 1, but the n counting actually starts with 0We'd first pick the 0th element, but there isn't one in this list, so it'll apply to not 1 but 2, not 3 but 4, etc. 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.
[01:31] You can get more complex with this. This pattern will actually pick the first four elements and apply the style to it. The reason again why it does that is, if we pass in 0for n, it would be -04, which is the fourth element, and it's -1+4 which is the third element, and so on.
[01:52] You can also do something like this which would be everything except for the first three elements. You can do some interesting stuff with the nth child. You can make some complex patterns.
[02:05] There are some other pseudo-classes that you might find helpful. There is the nth last child pseudo-class which is the same thing as nth child that just counts from the bottom going up. This only child applies to every element that is an orphan.
[02:19] Then, there is only of type which will allow you to target a specific element type. If you want to get a paragraph that was all alone regardless of other sibling, nodes were around it, you could use this.
[02:33] If you want to get last of type again if you want to get the last paragraph in a section, you could use this one.
[02:38] Then, you've got nth of type that 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 coming backwards up.
[02:50] You can get really complex for some of the pseudo-classes. In fact, some of them make it little bit hard to read and maintain the codes. You're going to want to be careful with these. Just use them where they make sense.
If it targets an element that doesn't exist, it is just skipped over - that's how all CSS selectors work. If you have a selector that targets an element that doesn't exist, no warnings or errors are thrown, it is just ignored.
Very useful lesson but the -n + 4 confuses me. The -n indicates that the element 0 is included in the selection? But how is it possible if the 0th element doesn't exist?