3 replies

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

I always use the

nth-child

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>

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

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

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

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

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

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

So what is

child

child

referring to?

.child

.child

doesn't have any children. Wouldn't a more apt name for this be

nth

nth

instead of

nth-child

nth-child

?

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

KP-C

Kevin Powell - Community•12mo ago•

3 replies

DanKaplanSES

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

I always use the

nth-child

nth-child

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

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

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

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

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

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

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

So what is

child

child

referring to?

.child

.child

doesn't have any children. Wouldn't a more apt name for this be

nth

nth

instead of

nth-child

nth-child

?

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads