Селектор первого родителя CSS не работает над большинством элементов

Question

У меня возникли проблемы с селектором first-child. Кажется, я не могу работать. Идея моего кода состоит в том, чтобы сделать простое преобразование двух элементов, и для этого мне нужно использовать: first-child. В моем коде 2 или более случаев, что это не работает. Вот они:

Первый случай:

CSS:

.container_principal .continut.rand{ 
    display:none; 
    sbackface-visibility: hidden; 
    transition: 0.6s; 
    transform-style: preserve-3d; 
} 

.container_principal .continut.rand:first-child{ 
    display:block; 
} 

HTML

<div class="container_principal acasa"> 
    <div class="continut rand principal">Content goes here 
    </div> 

    <div class="continut rand produse"> 
    </div> 

    <div class="continut rand despre"> 
    </div> 

    <div class="continut rand servicii"> 
    </div> 

    <div class="continut rand galerie"> 
    </div> 

    <div class="continut rand contact"> 
    </div> 
</div> 

Второй случай (это связано с JQuery, HTML, для этого CSS аналогичен предыдущему)

CSS

.rotate{ 
transform:rotateY(180deg); 
} 

.rotate:first-child{ 
display:none; 
} 

.rotate:last-child{ 
display:block; 
} 

Jquery:

Если кто-то может помочь мне, я был бы благодарен. Спасибо.

EDIT:

Вот Fidlle со всем моим кодом. Невозможно воспроизвести проблему любым другим способом. http://jsfiddle.net/hn8Ye/4/

Answer 1

Это помогает, если ваша скрипка и ваш размещенный код одинаковы.

first-child соответствует только первому элементу. Первым ребенком .container_principal является .header, поэтому .container_principal .continut:first-child никогда не будет соответствовать.

Попробуйте оборачивать ваши .continut элементы в другом <div>