creating objects with different color schemes - html

Question

article {
background-color:#d5ecf2;
width:1024px;
height:200px;
margin: 0 auto;
}
.articletext {
float:right;
height:180px;
width:720px;
margin:10px;
}
<article>
<div class="articletext">
<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>
</article>
<hr>
<article>
<div class="articletext">
<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>
</article>
<hr>
<article>
<div class="articletext">
<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>
</article>
On one of my pages I have 4 articles each with the same color background (#d5ecf2). My thought is to have these articles (and any future ones) rotate back and forth between the previous mentioned hex color and another hex color (#7c96a5). One way (which I guess you could call the long way) is to have two div id's or classes each with the different background colors and placing them individually in the HTML code, I was wondering if there is a way that you can automatically set the next article with the background color opposite of the one before it?

Answer 1

If they all appear on the same page, you can use the nth-child CSS selector:
article:nth-child(odd) {
background: #7c96a5;
}
Or, since you have other elements in the container div, use nth-of-type:
article:nth-of-type(odd) {
background: #7c96a5;
}

Answer 2

Close #Chris but you will need to use 2n:
article:nth-of-type(2n) {
background: #7c96a5;
}
Here is the fiddle