[css]How to specify the nth number, such as odd, even, or evenly spaced. “:nth-child()”and”:nth-last-child”

[css]How to specify the nth number, such as odd, even, or evenly spaced. “:nth-child()”and”:nth-last-child” css

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

css

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

css

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

css

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

css

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

css

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

css

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

css

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