"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 - then indicate an optional starting point.

In summary, 5n+2 means:

  

"Act every 5 items, starting from the second"

9n-1 can be seen like this:

  

"Act on every 9 items counting from -1"

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

Or simply 4n (does not need + when zero), which means

  

"Act every 4 items".

odd and even

You have the shortcuts odd and even , which means impar and par , respectively. Basically, the odd is equal to 2n+1 and even to 2n .

Example of n (multiple):

See the difference of the 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>

• multiple of 2 in red, in A;
• multiples of 3 in green, in B;
• multiples of 4 in blue, in C.

Example of + and - (starting point):

For this example, we will 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, in A (in practice, if effective from 4th and following);
• starting from 1st in green, in B;
• starting from -1 in blue, in C (in practice, if effective in 3rd and following).

Note that the range of all is the same, the offset is that it has changed. The A is the original offset (omission of + , equals +0 or -0 ). In the B column, we move the count "to the front", with +1 , and in the C column we move the count "backwards" with -1 .

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

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

Reversing the meaning with -n

-n may be a little trickier to understand. Basically it tells of the starting point "backwards". Do not confuse with nth-last-child , which counts since the last.

So, if you use -2n+7 , you will be counting from 2 to 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 logic of nth-last-child is the same, but counting from the last item back. In principle, it is possible to do almost everything that nth-last-child does using only nth-child , but if you have a dynamic application where the number of items varies, it is best to use the selector that is appropriate for each case, calculating the indices. If you also have some interval before you start selecting the items, or in the case of -n , it is important to have both selectors to choose which one is most appropriate.

nth-of-type

We still have nth-of-type that was not mentioned in the question. All "enesimal" selectors use the same logic. The nth-of-type is a facilitator, which considers the element type, 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 em instead of span on 03

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

• :nth-of-type(2n+1) "jumped"% of count%, inclusive.

The idea of this answer is only to complement what was said by @bacco, but with a few more examples and use cases. In addition to making some clarifications of other points not addressed.

According to the official W3C documentation n it can be an integer (positive, negative, or 0). And the index of the first child of an element is 1 . Logo :nth-child(0n + 0.1) is not valid Source: link

The% w_C% according to W3C would be (a n + b) , so% w_C% determines the size of the group and% w_% index, Formula .

:nth-child(5n)

Represents the number elements [5 × 1] = 5 , [5 × 2] 10 , [5 × 3] = 15 , etc.

:nth-child(3n+4)

Representstheelementsofnumber[(3×0)+4]=4,[(3×1)+4]=7,[(3×2)+4]=10,[(3×3)+4]=13,etc.

:nth-child(-n+3)

Representsforwardthelastthreeelements.[=-0+3,-1+3,-2+3]

:nth-child(odd)ou:nth-child(2n+1)

RepresentstheoddrowsofanHTMLtable:1,3,5,etc.

:nth-child(even)ou:nth-child(2n)

RepresentstheevenlinesofanHTMLtable:2,4,6,etc.

nth-child(n)

Representsallchildelements

Tounderstandbetter,seetheimagesbelowwithadifferentapproach:

Blocks2bygrabbingindex1

Blocksof3bygrabbingindex2

Source: link

If the value of an is b , the corresponding element in the group will be ex: (3n+3) = ((3xn)+3) index , but counted back to the front of index 1. In that case, element correspondent of a group will no longer correspond to an element of that group, but to one above it.

Using b you can apply the same rules, but in this way the count index starts from forward.

Last-child Blocks of 3, but starting from the forward negativo not bth

I'llstressthatusingnth-last-childyoucanhavethesameresults,butusingdifferent"rules". As can be seen below, all rules result in stylizing only the third element.

.foo span:nth-child(0n+3) {
    background-color: blue;
}
.bar span:nth-child(+3) {
    background-color: blue;
}
.foobar span:nth-child(3) {
    background-color: blue;
}
span {
    color:white;
    display:inline-block;
    padding:5px;
    margin: 5px;
    background-color:#f00
}

<div class="foo">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>
<div class="bar">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>
<div class="foobar">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>

Another use case would be to style only one element n forward, for example to split a list from half to front. Ex: in a list of 10 elements you would use 321 to stylize from the sixth element to the end of the list.

.foo span:nth-child(n+6) {
    background-color: blue;
}
span {
    color:white;
    display:inline-block;
    padding:5px;
    margin: 5px;
    background-color:#f00
}

<div class="foo">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>

Another use case for example is when you want to stop applying the style in the first and last child. You can concatenate two 123 to only stylize the "kernel" and leave the first and last child without the style:

.foo span:nth-child(n+2):nth-last-child(n+2) {
    background-color: blue;
}
span {
    color:white;
    display:inline-block;
    padding:5px;
    margin: 5px;
    background-color:#f00
}

<div class="foo">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>

And if you want to be even more specific and get the elements only from 4 to 8 you can concatenate two nth-child to make a n+6 where you only get whatever is between the fourth and eighth child. Here's how it looks in the example below:

.foo span:nth-child(n+4):nth-child(-n+8) {
    background-color: blue;
}
span {
    color:white;
    display:inline-block;
    padding:5px;
    margin: 5px;
    background-color:#f00
}

<div class="foo">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>

But calm down, you can still be more specific! For example delete child 6 from this range, you should concatenate everything with a pseudo-classes rule at the end, excluding nth-child from the unwanted child, see the example below:

.foo span:nth-child(n+4):nth-child(-n+8):not(:nth-child(6)) {
    background-color: blue;
}
span {
    color:white;
    display:inline-block;
    padding:5px;
    margin: 5px;
    background-color:#f00
}

<div class="foo">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</div>

The formatting of the style should also be done carefully since range can break your rule:

Valid examples with blanks

:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )

Examples Invalid with whitespace

:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)