title: How to correctly select every odd child's first child?
body: <p>I'm trying to make all the title <code>div</code> bold and red, but the css I have is making all of them bold and red. What is wrong with my css?</p>
  
  <p>Here's the <a href="http://jsfiddle.net/XKYeg/7/" rel="nofollow">fiddle</a>.</p>
  
  <pre><code>&lt;div id=foo&gt;
      &lt;div&gt;
          &lt;div&gt;title 1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;data 1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;title 2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;data 2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;title 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;data 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;title 4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;data 4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#foo {
      font-size:8pt;
  }
  #foo:nth-child(odd):first-child {
      font-weight:bold;
      color:red;
  }
  </code></pre>