Friday , December 20 2024

How to colorize every second or odd element in css

I used the most popular query for my practice in the post title, but there are more options in the table below.

Options for :nth-child

1 1 The first element, is a synonym for the :first-child pseudo-class
5 5 5th element
2n 2, 4, 6, 8, 10 All even elements, equivalent to even
2n+1 1, 3, 5, 7, 9 All odd elements, equivalent to odd
3n+2 2, 5, 8, 11, 14
-n+3 3, 2, 1
5n-2 3, 8, 13, 18, 23
even 2, 4, 6, 8, 10 All even elements
odd 1, 3, 5, 7, 9 All odd elements

How to use:

div.test p:nth-child(2n) {font-size: 2em;}
.block .intro:nth-child(2n+1) {background: #000;}

About admin

Hi there! My name is Iryna, I am a web developer from Ukraine. While working on freelance projects I often face different technical issues and in this blog I publish articles on how to solve them. I am also interested in digital drawing and in this blog you will find brief tutorials that helped me and hopefully can help you as well.

Check Also

Css styles for WordPress admin in functions.php

If you need to add individual styles, and they are only a couple of lines, …

Leave a Reply

Your email address will not be published. Required fields are marked *