EN
CSS - style odd elements only
0 points
In this article, we would like to show you how to style odd elements only using CSS.
Quick solution:
xxxxxxxxxx
1
li:nth-child(odd) {
2
/* style properties here */
3
}
In this example, we create an unordered list and style its odd elements using :nth-child(odd);
pseudo class.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
li:nth-child(odd) {
7
background: yellow;
8
}
9
10
</style>
11
</head>
12
<body>
13
<ul>
14
<li>element 1</li>
15
<li>element 2</li>
16
<li>element 3</li>
17
<li>element 4</li>
18
</ul>
19
</body>
20
</html>