title: How to do CSS nth-child in span tags?
body: <p>Apparently the nth-child pseudo is working well with tds or trs in a table. but what about span tags?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="refals_wr" style="font: normal 14px Verdana, Geneva, sans-serif; border-top: 2px dashed #CCC;"&gt;
      &lt;table width="100%" border="0" cellspacing="5" cellpadding="5"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      &lt;span&gt;NAME OF SORTING ALGORITHM:&lt;/span&gt;&lt;br /&gt;
                      &lt;span id="algName"&gt;Bubble Sort&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      &lt;span&gt;TOTAL SWAPS:&lt;/span&gt;&lt;br /&gt;
                      &lt;span id="algTotalSwaps"&gt;50&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div&gt;
                      &lt;span&gt;SWAP COUNT:&lt;/span&gt;&lt;br /&gt;
                      &lt;span id="algSwapCount"&gt;8&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#refals_wr span:nth-child(odd)  { color: green;  }
  #refals_wr span:nth-child(even) { color: orange; }
  </code></pre>
  
  <p>Does not give desired result, everything is Green! Also, the last span (the one under SWAP COUNT containing the number "8") should <strong>not</strong> be affected in the coloring.</p>
  
  <p>Is there a better way?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/xzdv5csp/" rel="nofollow">http://jsfiddle.net/xzdv5csp/</a></p>