First-child is being ignored

[Gandalf]

I have an odd problem. I have this codepen to illustrate the issue.

As it stands the :first-child selector is being ignored. If I remove the initial paragraph, it is fine.

I guess there’s a simple explanation, but see it I cannot!

[PaulOB]

@Gandalf

I guess there’s a simple explanation, but see it I cannot!

Yes the answer is that the first listVids div is the second child. Your rule isn’t being ignored it just doesn’t apply to anything.

Just because you add a class to your div doesn’t change the order of that div in its current context. The div is still the second child in that context.

You may be thinking that .listVids is a collection of elements and first-child will refer to the first of those elements… and so on. That not the way the first-child or nth-child works. The elements are children of their current context no matter what class they have. The only purpose of adding the listVids class is that you can avoid styling an incorrect element.

e.g. the browsers finds the nth-child of that context and if that nth-child has the class that you set then it gets styled. (nth-child(6) does not find the 6th item with a class of listVids because that may in fact be the 10th child It finds the 6th child first and then looks to see what class it is before applying the rule.)

[Gandalf]

@PaulOB

You may be thinking that

You read my mind

Thanks for clearing that up.