We can easily change the background color of div’s even and odd index using the:nth-child pseudo-class with the even and odd keywords, respectively. Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1). Here, we specify two different background colors for odd and even p elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Even Odd Example</title>
<style type="text/css">
div :nth-child(even){
background-color: yellow;
}
div :nth-child(odd){
background-color: blue;
}
</style>
</head>
<body>
<div id="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>