Kevin Powell - CommunityKP-C
Kevin Powell - Community•10mo ago•
3 replies
DanKaplanSES

What does "child" refer to in the `nth-child` pseudo class?

I always use the nth-child pseudo class incorrectly on my first try because I infer it to mean "select the nth child of this element."

e.g., If I wanted to select the second child of a container, this makes more sense to me:

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>


.container:nth-child(2) {
  ...
}


But that doesn't do what I want. This does:

.child:nth-child(2) {
  ...
}


So what is child referring to? .child doesn't have any children. Wouldn't a more apt name for this be nth instead of nth-child?

I'm asking this question because I think I'll stop making this mistake when I understand the reasoning behind the name.
Was this page helpful?