section {
background-color:#d5ecf2;
width:1024px;
height:200px;
margin: 0 auto;
}
.sectiontext {
float:right;
height:180px;
width:720px;
margin:10px;
}<section>
<div class="sectiontext">
<h3>GDS 114.01: HTML and Javascript</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<hr>
<section>
<div class="sectiontext">
<h3>GDS 115.01: Digital Graphics for Gaming</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<hr>
<section>
<div class="sectiontext">
<h3>Personal Work</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>There are 4 sections on one of my web pages, all with the same background color (#d5ecf2). I am considering alternating this color with another hex color (#7c96a5) as new sections are added. One way to achieve this is by creating separate div IDs or classes with different background colors and manually placing them in the HTML code. Is there a way to automatically set the next section's background color opposite to the previous one?