What do "n" means, numbers and signals on the "Nth-Child" or "Nth-last-Child" selectors?

Asked

Viewed 1,936 times

25

I’ve always used the n combined with the selector nth-child or nth-last-child 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 the n in CSS position pseudo-selectors?

What the n represents in that expression?

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

  • 1

    It explains here: http://www.w3schools.com/cssref/sel_nth-child.asp

  • @diegofm so I decided to ask the question. It’s very "in the background". Some examples leave the guy more confused than clarified :D

2 answers

41


"Nth" can be "translated" as "nth". "nth" precisely because it is "n", ie 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 short, 5n+2 means:

"Act every 5 items, starting from the second"

9n-1 can be seen like this:

"Act every 9 items, counting from -1"

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

Or simply 4n (don’t need to put + when it is zero), which means

"Act every 4 items".


odd and even

You have the shortcuts odd and even, that mean impar and par, respectively. Basically the odd amounts to 2n+1 and the even to 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, in 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, in A (in practice, if effective in 4º and following);
  • starting from the 1st green, at the B;
  • starting from -1 in blue in C (in practice if effective in 3º and following).

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

Note that in any case, 4n+4 is almost the same thing as +0, and 4n+16 also, after all so much 4 how much 16 are multiples of 4. What changes is where the count starts (understand better compared to the -n)

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


Reversing the direction with -n

The -n maybe it is a little more complicated to understand. Basically it counts from the starting point "backwards". Do not confuse with the nth-last-child, that counts since the last.

So if you use -2n+7, 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 backwards. In principle, it is possible to do almost everything that the nth-last-child does using only the 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, so you don’t have to recalculate the contents. If you will also have some interval before you start selecting items, or in the case of -n, it is important to have both selectors to choose which is the most suitable.


nth-of-type

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

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

  • the :nth-of-type(2n+1) "jumped" the em of counting, including.

  • 4

    This explanation deserved to be in English at MDN.

7

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.. inserir a descrição da imagem aqui

: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.. inserir a descrição da imagem aqui

: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

inserir a descrição da imagem aqui

Blocks of 3 catching index 2

inserir a descrição da imagem aqui

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

inserir a descrição da imagem aqui

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)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.