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.

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;
}

Conclusion

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

Leave a Reply

Your email address will not be published.