How to style even and odd elements with CSS?

Spread the love

Sometimes, we want to style even and odd elements with CSS.

In this article, we’ll look at how to style even and odd elements with CSS.

To style even and odd elements with CSS, we use the nth-child selector.

For instance, we write

<ul>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
  <li>ho</li>
</ul>

to add a list.

Then we write

li {
  color: black;
}
li:nth-child(odd) {
  color: #777;
}
li:nth-child(even) {
  color: blue;
}

to style the elements in odd positions with

li:nth-child(odd) {
  color: #777;
}

And we style the elements in odd positions with

li:nth-child(even) {
  color: blue;
}

To style even and odd elements with CSS, we use the nth-child selector.