How to specify even or odd number of elements with CSS?

You may have seen designs with alternating background colors for multi-line list items.

This design can be achieved by specifying two class names alternately, but it would be easier if you could specify even and odd numbers with CSS.

This time, for those who want to select even-numbered/odd-numbered elements with CSS,

I will explain according to the above items.

After reading this article, you will be able to select even and odd elements with CSS .

Please read to the end!

How to choose even/odd elements

To select between even and odd elements in CSS, use the nth-child pseudo-class .

Make a list and write it down.

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

ul li{
  list-style: none;
}
ul li:nth-child(even){
  background-color: green;
  color: #fff;
}

:nth-child(even) will add the style to the even numbered li in the ul.

In the above, the background color is added and the text is white.

The same process can be done by writing “2n+1” instead of “even” .

For odd numbers, write “obb” or “2n+1”.

In addition, nth-child can be specified in various ways.

You can also simply specify the element such as the ○th.

ul li:nth-child(3){
  background-color: green;
  color: #fff;
}

This specification applies the style only to the third. You can also specify it with a formula such as “3n+2”.

Let’s change the numerical value and try various things.

About the difference from nth-of-type

There is a similar pseudo-class called nth-of-type.

How are the two different?

I will explain each of the features of the two pseudo-classes.

Characteristics of nth-child

nth-child modifies the style of child elements in the specified order .

However, if it is written after the element name, such as p:nth-child, the style will be applied only to that element.


Add CSS like the one above.

In this case, the order specified is second, but the second element is a div element, so no styles are applied.

If you try to change the third, you can see that the style of “p element 2” changes.

This way, if the elements in that order are different than what you specify, the style stays the same.

If you specify an even number as p:nth-child(even), it applies only to the fourth “p element 3”.

Also, in the case below, since no element is specified, the style of the second element simply changes.

.sample :nth-child(2){
  background-color: green;
  color: #fff;
}

The style of the div element has changed.

Characteristics of nth-of-type

nth-of-type changes the style in order counting only the specified elements .

For the previous HTML, let’s specify as follows.

.sample p:nth-of-type(2){
  background-color: green;
  color: #fff;
}

Notice that the style was applied to the second child element counting only p elements.

Specifying an even number will change the style of “p element 2” and “p element 4”.

Unlike nth-child, you can see that the div element is skipped.

Summary: Let’s use even and odd numbers in CSS

This time, I explained how to specify even-numbered and odd-numbered elements with CSS .

You also introduced the difference between nth-child and nth-of-type.

If you use this method, even if the order of the list changes later, you can save trouble such as changing the class name.

I hope that this article will be of help to you.