Q23: CSS Pseudo Selector

[00:00:00]
>> In which of the CSS pseudo selectors can we use to only target the first item? So this item one, so not to three or four. And I realized that this is like invalid list item, I guess cuz you all should have been wrapped in a link that I forgot to do that.

[00:00:15]
So we just have to live with this. It'll work, though, HTML will render it.
>> HTML always works.
>> All right, annoyingly. So the correct answer here is A and C. So, first, we have the ul:first-child pseudo selector or pseudo-class. With this, we can get the first ul elements among a group of sibling elements.

[00:00:44]
So in this case, it's just the first ul within, I guess, the root, which in this case is the div. So then we target that ul. And then we use a child combinator to select the list item that's a direct child of the ul. So in this case, that targets the very first list item cuz there are no other list items.

[00:01:03]
So this one's right. Yeah, towards that one. Then we have the ul:first-child again. So we again target that first ul, but now we're using the adjacent sibling combinator. And this selector matches the second element. So the li only if it's like immediately follows the first element on the same level.

[00:01:26]
It's like an adjacent sibling. So this would have worked if we didn't have that ul and we had an li right next to that ul, then this would have been fine. But we don't have that, so this doesn't work. [LAUGH] Yeah, so now C also works. So we again have the ul: first-child to target the first ul.

[00:01:43]
And then we also have the li:first-child to target the very first-child that is an li within the ul, that's the first-child. Sounds so weird just saying this out loud with those CSS selectors, but yeah. So only get the first li, the first-child that's an li of that ul.

[00:02:04]
Now we have the ul first-of-type and then the li first-of-type, which doesn't work. So essentially what happens is we again get the right ul with that ul first-of-type. This is the first-of-type within that container with sibling elements. But then because we say li first-of-type, it also targets the first li within the ul that's rendered within that ul.

[00:02:26]
So it also targets too. Yeah, so this happens because the li first-of-type gets applied to all the children and that li is still the first type within the direct child of ul. That sounds super confusing but yeah, that is the way it is. And lastly, we do the same thing, but again with the adjacent sibling combinator.

[00:02:50]
So does this won't work cuz we don't have an li on the same level as ul. It doesn't have any li with the siblings. It's also not what we're looking for cuz that one li is not the sibling. So that won't work.