title: CSS first-child selector not working on most elements
body: <p>I am having trouble with the :first-child selector. I cant seem to get it working. The ideea of my code is to make a simple transform to two elements and for that i need to make use of the :first-child. There are 2 or more cases in my code that it doesn't work. Here they are:</p>
  
  <p>The first case:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container_principal .continut.rand{
      display:none;
      sbackface-visibility: hidden;
      transition: 0.6s;
      transform-style: preserve-3d;
  }
  
  .container_principal .continut.rand:first-child{
      display:block;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container_principal acasa"&gt;
      &lt;div class="continut rand principal"&gt;Content goes here
      &lt;/div&gt;
  
      &lt;div class="continut rand produse"&gt;
      &lt;/div&gt;
  
      &lt;div class="continut rand despre"&gt;
      &lt;/div&gt;
  
      &lt;div class="continut rand servicii"&gt;
      &lt;/div&gt;
  
      &lt;div class="continut rand galerie"&gt;
      &lt;/div&gt;
  
      &lt;div class="continut rand contact"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The second case (this involves jquery; the html for this css is the same as the one before)</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.rotate{
  transform:rotateY(180deg);
  }
  
  .rotate:first-child{
  display:none;
  }
  
  .rotate:last-child{
  display:block;
  }
  </code></pre>
  
  <p><strong>jQUERY:</strong></p>
  
  <pre><code>$(".col_1.produse").click(function(){
          $(".continut.rand.principal, .continut.rand.produse").addClass("rotate");
      });
  </code></pre>
  
  <p>If anyone is able to help me i'd be grateful. 
  Thanks.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is a Fidlle with all my code. Couldnt reproduce the problem any other way. 
  <a href="http://jsfiddle.net/hn8Ye/4/" rel="nofollow">http://jsfiddle.net/hn8Ye/4/</a></p>