title: CSS :first-of-type not working
body: <p>I thought :first-of-type will effect the first-of-type which in my case is</p>
  
  <pre><code>&lt;div class="box"&gt;I am the first box in div.center...&lt;/div&gt;
  </code></pre>
  
  <p>If I remove the  <code>&lt;div class="top"&gt;</code> the CSS works and adds the green-top-border.</p>
  
  <p>But I need <code>&lt;div class="top"&gt;</code>, so why is it not working if <code>&lt;div class="top"&gt;</code> is there?</p>
  
  <p><a href="http://jsfiddle.net/ChHXh/1/" rel="noreferrer">FIDDLE</a></p>
  
  <pre><code>&lt;div class="main-wrap"&gt;
      &lt;div class="center"&gt;
          &lt;h3&gt;Lorem Ipsum&lt;/h3&gt;
          &lt;div class="top"&gt;XXX XXX XXXX&lt;/div&gt;
          &lt;div class="box"&gt;I am the first box in div.center. Why no top border?&lt;/div&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .box {
      width:100%;
      height:30px;
      margin:10px 0;
      background-color:orange;
  }
  
  .main-wrap .center div.box:first-of-type {
      border-top:4px solid green;
  }
  .box {
      position:relative;
      border-bottom:4px solid green;
  }
  </code></pre>