The idea of this answer is just to complement what was said by @Acco, but with a few more examples and use cases. In addition to making some clarifications on other points not addressed.
According to official W3C documentation n can be an integer (positive, negative or 0). And the index of the first child of an element is 1. Soon :nth-child(0n + 0.1) is not valid Source: https://www.w3.org/TR/selectors-3/#Nth-Child-pseudo
To Formula according to the W3C would be (ton+b), so that an determines the size of the group and b the index, ex: (3n+3) = ((3xn)+3).
:nth-child(5n)
Represents the number elements [5 1]=5, [5 2]10, [5 3]=15, etc..
:nth-child(3n+4)
Represents the number elements [(3 0)+4]=4, [(3 1)+4]=7, [(3 2)+4]=10, [(3 3)+4]=13, etc..
:nth-child(-n+3)
Represents backwards the last three elements. [=-0+3, -1+3, -2+3]
:nth-child(odd) ou :nth-child(2n+1)
Represents the odd lines of an HTML table: 1, 3, 5, etc.
:nth-child(even) ou :nth-child(2n)
Represents even lines of an HTML table: 2, 4, 6, etc.
nth-child(n)
Represents all child elements
To better understand see the images below with a different approach:
Blocks of 2 catching index 1
Blocks of 3 catching index 2
Source: https://www.sitepoint.com/atoz-css-screencast-nth-child/
If the value of b for negativo, the corresponding item in the group shall be the bth index, but counted backwards from index 1. In this case, the corresponding element of a group will no longer correspond to one element of that group, but to one above it.
Using nth-last-child you can apply the same rules, only that way the index count starts backwards.
Last-Child Blocks of 3, but starting backwards 321 nay 123
I’ll point out that using nth-child you can have the same results, but using different "rules". As can be seen below, all rules result in styling 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 stylize only of certain element n forward, for example to split a list from half forward. Ex: in a list of 10 elements you would use n+6 to style 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 first and in the last son. Vc can concatenate two pseudo-classes to just stylize the "brain" and leaves 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 in case you want to be even more specific and take the only elements from 4 to 8 vc can concatenate two nth-child to make a range where you only take what is between the fourth and the eighth child. See 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 eliminate the child 6 of this range, for this you must concatenate everything with a rule not(:nth-child()) at the end excluding from range the unwanted child, see how it looks in the following example:
.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 style formatting should also be done with attention seen that espaços em branco can break your rule:
Examples valid with blanks
:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )
Examples invalid with blanks
:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)
It explains here: http://www.w3schools.com/cssref/sel_nth-child.asp
– user28595
@diegofm so I decided to ask the question. It’s very "in the background". Some examples leave the guy more confused than clarified :D
– Wallace Maxters