css3 – What do the "n", numbers and signs in the "nth-child" or "nth-last-child" selectors mean?

Question:

I've always used n combined with the nth-child or nth-last-child selector in CSS, but I still can't quite understand its meaning.

For example:

p:nth-child(3n+0) {
  background: red;
}
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>

Or

div p:nth-last-child(-n+2) {
  background: red;
}
<div>
  <p>Teste</p>
  <p>Teste</p>
  <p>Teste</p>
  <p>Teste</p>
  <p>Teste</p>
  <p>Teste</p>
</div>

What does n mean in CSS pseudo-position selectors?

What does n represent in this expression?

What do the numbers and signs that accompany this expression with n , such as -n+2 or 3n+0 ?

Answer:

"nth" can be "translated" as "nth". "Nth" precisely because it is "n", that is, any number. When you say 3n, it means "every three", "5n" every five, and so on. The + and - afterward indicate an optional starting point.

In short, 5n+2 means:

"Actuate every 5 items, starting from the second"

9n-1 can be seen like this:

"Actuate every 9 items, counting from -1"

(In this case, you will only see the effect on the 8th item, as the -1 only exists "mathematically", but it is not part of what is displayed on the screen).

Or simply 4n (you don't need to put + when it's zero), which means

"Actuate every 4 items".

odd and even

You have the shortcuts odd and even , which stand for impar and par , respectively. Basically the odd equals 2n+1 and the even 2n .

Example of n (multiple):

See the difference of items with n :

#a span:nth-child(2n) {background-color:red  }
#b span:nth-child(3n) {background-color:green}
#c span:nth-child(4n) {background-color:blue }
span {color:white;display:inline-block;padding:0 10px;background:#ccc}
<div id="a"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 2n</div><br>
<div id="b"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 3n</div><br>
<div id="c"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 4n</div><br>
  • multiples of 2 in red, in A;
  • multiples of 3 in green on B;
  • multiples of 4 in blue in C.

Example of + and - (starting point):

For this example, let's use multiples of 4 ( 4n ) in all cases:

#a span:nth-child(4n  ) {background-color:red  }
#b span:nth-child(4n+1) {background-color:green}
#c span:nth-child(4n-1) {background-color:blue }
span {color:white;display:inline-block;padding:0 10px;background:#ccc}
<div id="a"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 4n  </div><br>
<div id="b"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 4n+1</div><br>
<div id="c"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 4n-1</div><br>
  • starting from zero, in red, at A (in practice, it takes effect from the 4th and following ones);
  • starting from 1st in green, at B;
  • starting from -1 in blue, in C (in practice, effective in 3rd and following).

Note that everyone's range is the same, the displacement has changed. The A is the original displacement (omission of + , equals +0 or -0 ). In column B , we shift the count "forward" with +1 , and in column C shift the count "backward" with -1 .

Note that in any case, 4n+4 is almost the same thing as +0 , and 4n+16 too, after all both 4 and 16 are multiples of 4. What changes is where the count starts (understand better comparing with -n )

Likewise, 4n+1 and 4n-3 are almost the same thing, as the difference between +1 and -3 is 4 even. What changes is which element starts counting (as negative numbers "do not appear on screen", the effect is the same).

Reversing direction with -n

The -n perhaps a little more complicated to understand. Basically it counts from the "backward" starting point. Not to be confused with nth-last-child , which counts from the last one.

So, if you use -2n+7 , you will be counting by 2 in 2, from the seventh item to "back". Items greater than 7 will not be affected.

#a span:nth-child( 2n+7) {background-color:red  }
#b span:nth-child(-2n+7) {background-color:green}
#c span:nth-child( -n+7) {background-color:blue }
span {color:white;display:inline-block;padding:0 10px;background:#ccc}
<div id="a"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> 2n+7</div><br>
<div id="b"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> -2n+7</div><br>
<div id="c"><span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> -n+7</div><br>

nth-last-child

The nth-last-child logic is the same, but counting backwards from the last item. In principle, it is possible to do almost everything nth-last-child does using just nth-child , but if you have a dynamic application where the number of items varies, better use the selector that is suitable for each case, not to having to keep recalculating the indexes. If you are also going to have some gap before starting to select the items, or in the case of -n , it is important to have both selectors to choose which one is the most suitable.

nth-of-type

We also have the nth-of-type that was not mentioned in the question. All "enesimal" selectors use the same logic. The nth-of-type is an enabler, which considers the type of the element, not just its position (it only counts when the element is of the indicated type).

#a span:nth-child(2n+1)   {background-color:red  }
#b span:nth-of-type(2n+1) {background-color:green}
span,em {color:white;display:inline-block;padding:0 10px;background:#ccc}
<div id="a"><span>01</span> <span>02</span> <em>03</em> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> :nth-child(2n+1)</div><br>
<div id="b"><span>01</span> <span>02</span> <em>03</em> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> :nth-of-type(2n+1)</div><br>
  • we use an em instead of the span in item 03

  • :nth-child(2n+1) did not style em , but included it in count

  • the :nth-of-type(2n+1) "skipped" the count's em , inclusive.

Scroll to Top