Home / Questions / 90648
Accepted
user7176
Asked: 2020-07-27 03:42:04 +0800 CST 2020-07-27 03:42:04 +0800 CST

How exactly does nth-child work?

  • 772

The pseudo-class :nth-childis often used in tables or lists to differentiate even rows from odd ones:

li:nth-of-type(2n) {
  background-color: #ccc;
}
<ul>
  <li>elemento1</li>
  <li>elemento2</li>
  <li>elemento3</li>
  <li>elemento4</li>
</ul>

Or to select a specific child element:

li:nth-of-type(3) {
  background-color: #F00;
}
<ul>
  <li>elemento1</li>
  <li>elemento2</li>
  <li>elemento3</li>
  <li>elemento4</li>
</ul>

However, it has a more complex syntax, I have seen cases of this style:

p:nth-child(4n+2)

I don't quite understand what exactly it does and what practical uses it can have.

html

1 Answers

  1. Best Answer

    The pseudoclass :nth-child()selects siblings that meet a certain condition defined in the formula an + b. aand bmust be integers, nit is a counter. The group anrepresents a cycle, every few elements it repeats; bindicates where we start counting from.

    Let's see it with examples to understand it better:

    Select every three elements starting with the second: 

    :nth-child(3n + 2)


    #contenedor :nth-child(3n + 2){
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select every three elements: 

    :nth-child(3n + 0)

    When b=0it can be omitted remaining:

    :nth-child(3n)


    #contenedor :nth-child(3n){
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select the second element:

    :nth-child(0n + 2)

    When a=0it can be omitted anand we are left with:

    :nth-child(2)


    #contenedor :nth-child(2){
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select every two elements up to the sixth:

    We can also use negative numbers. When ait is negative, the cycle is only repeated until b:

    :nth-child(-2n + 6)


    #contenedor :nth-child(-2n + 6){
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select all elements up to the sixth:

    yes a=1or a=-1we can omit a:

    :nth-child(-n + 6)


    #contenedor :nth-child(-n + 6){
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select the first element:

    If what we wanted was to select the first element, we can use the pseudoclass first-child, a specific pseudoclass for this purpose.

    It would be equivalent to using any of the following pseudo-classes:

    • nth-child(0n+1)
    • nth-child(1) 

    #contenedor p:first-child{
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select the last element:

    Similarly, we can also select the last element using the pseudo-class last-child:

    #contenedor p:last-child{
  border:solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Keywords:

    To select even and odd elements we also have the keywords oddand even:

    :nth-child(odd)
:nth-child(even)


    #contenedor :nth-child(odd){
  border:solid 1px red;
}
   #contenedor :nth-child(even){
  border:solid 1px blue;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <p>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</p>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <p>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</p>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <p>Laborum sed facere magni blanditiis sit id vel enim voluptas.</p>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    Select the nth element of a given type:

    Sometimes it happens that we want to select, for example, the second child paragraph of a paragraph divthat has several different child-elements and we try something like this:

    p:nth-child(2)


    #contenedor p:nth-child(2) {
  border: solid 1px red;
}
    <div id="contenedor">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, libero!</p>
  <div>Nulla temporibus ipsa consequatur, cumque non error mollitia officiis nostrum.</div>
  <p>Nihil magnam alias non quos maxime animi, sequi nisi ratione!</p>
  <p>Distinctio sunt, dolorum id at soluta quas, quisquam et delectus.</p>
  <div>Sit totam sint quibusdam cum hic, non aliquid praesentium vero.</div>
  <p>Iure, ex mollitia nesciunt doloribus minima maxime libero amet doloremque?</p>
  <div>Laborum sed facere magni blanditiis sit id vel enim voluptas.</div>
  <p>Quo, cupiditate debitis voluptates quae vel, saepe sint adipisci qui!</p>
  <p>Perspiciatis sed inventore ipsa facilis deleniti corporis beatae, ipsum libero.</p>
  <p>Minima est dolore quia quae laudantium magnam dolorem modi ullam.</p>
</div>

    It doesn't work because it p:nth-child(2)looks for the second child that is also a pand since the second child is not a pthe condition is not met and it does nothing.

    Could that be done somehow? Yes, but with another pseudo-class called :nth-of-type()that works basically the same but only counts the elements of the chosen type.

    • 21