![[css]How to specify the nth number, such as odd, even, or evenly spaced. “:nth-child()”and”:nth-last-child”](https://arts-factory.net/en/wp-content/uploads/2019/01/nth-child-2.jpg)
When you have multiple elements in a row and you want to change the style of a few of them, what do you do?
If you are using the method of adding a class each time, please read this article. In this article, I will show you how to specify odd numbers, even numbers, even spacing, etc. using only css without using classes.
It is easy to set up, and on top of that, it kills two birds with one stone since you don’t need to add unnecessary classes to the source.
Applying styles to even and odd numbers
Red background color for even numbers
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-child(2n){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Another way to specify an even number is to use :nth-child(even).
A css that expresses exactly the same thing as above in a mathematical expression would be :nth-child(2n) (multiples of 2).
Show odd numbers with red background color
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-child(2n+1){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Another way to specify an odd number is to use :nth-child(odd).
in a mathematical expression would be :nth-child(2n+1) (the first of multiples of 2).
Apply the style to the nth
Display the third background color from the front in red.
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-child(3){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
The css to represent the third from the front as a mathematical expression is :nth-child(3).
The third background color from the back is red.
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-child(3){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
To count from the back, use :nth-last-child instead of :nth-child.
The css that represents the third from the back as a formula is :nth-last-child(3).
Apply styles to Up to nth from the front and Up to nth from the back
Red background color for the first three.
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example5"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-child(-n+3){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
The css to express Up to three from the front as a mathematical expression is :nth-child(-n+3).
The background color of the fourth and subsequent items from the front will be red.
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example6"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-child(n+4){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
The css that expresses the fourth from the front onwards as a formula is :nth-child(n+4).
The background color of the third and subsequent ones will be red.
html
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="example5"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> |
css
|
1 2 3 |
.example1 li:nth-last-child(-n+3){ background:#f00; } |
Result
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
The css that represents the third to the front as a formula is :nth-last-child(-n+3).
Summary of :nth-child() and :nth-last-child usage
:nth-child(3n)multiple of 3
:nth-child(3n+1)The first number in multiples of 3.
:nth-child(3)Third from the front.
:nth-last-child(3)Third from the back.
:nth-child(-n+3)Up to three from the front.
:nth-child(n+4)Fourth from the front and onwards
:nth-last-child(-n+3)Up to the third from the back
