title: How do I select every other div class element using just CSS (no js)
body: <p>I know how to do this using javascript and php, but I am trying to learn how/if it is possible to do this using just css.</p>
  
  <p>I have a container which holds many items.  Each item has a picture, and below it, a div containing a description.  I want the background of the description to be different for every other item.</p>
  
  <p>Is it possible to achieve this using just css? If so, how?  I have been fooling around with using the selectors </p>
  
  <pre><code>.item:nth-child(odd){background-color:red}
  .item .description:nth-of-type(odd){background-color:orange;}
  </code></pre>
  
  <p>I can't seem to get it.  Suggestions, comments, anything is appreciated.<br>
  Below is some simplified sample code that demonstrates what I have going on.</p>
  
  <pre><code>&lt;style&gt;
  #container{width:100% height:100%;}
  .item {float:left; width:250px; height:700px;}
  .item img {width:250px; height:250px; float:left;}
  .description {width:250px; height:450px; float:left; background-color:blue;}
  .description:nth-of-type(even){background-color:red;}      // &lt;- Here's the line!!
  &lt;/style&gt;
  
  &lt;html&gt;
   &lt;body&gt;
    &lt;div id="container"&gt;
     &lt;div class="item"&gt;       //item 1
      &lt;img src="image.jpg"/&gt;
      &lt;div class="description"&gt; //This (and every odd number) I want to be blue 
       &lt;h1&gt;Title&lt;/h1&gt;
       &lt;h2&gt;Sub Title&lt;/h2&gt;
       &lt;p&gt;Lorem Ipsum dolor sit for Adun!&lt;/p&gt;
       &lt;a href="#"&gt;::LEARN MORE::&lt;/a&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="item"&gt;      //item 2 and so on...
      &lt;img src="image.jpg"/&gt;
      &lt;div class="description"&gt; //and this (and every even number, red)
       &lt;h1&gt;Title&lt;/h1&gt;
       &lt;h2&gt;Sub Title&lt;/h2&gt;
       &lt;p&gt;Lorem Ipsum dolor sit for Adun!&lt;/p&gt;
       &lt;a href="#"&gt;::LEARN MORE::&lt;/a&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;body&gt;
  &lt;/html&gt;
  </code></pre>