CSS-селектор для скрытия элементов вложенных

Question

Мне нужно скрыть все, кроме первого h3, в списке контейнеров. Они содержат только классы.

<div class="preview"> 
    --content 
</div> 
<div class="preview evaluation"> 
    <h3>Heading</h3> <!-- should stay --> 
</div> 
<div class="preview evaluation"> 
    <h3>Heading</h3> <!-- should hide --> 
</div> 
<div class="preview evaluation"> 
    <h3>Heading</h3> <!-- should hide --> 
</div> 

Мне нужно сделать это только с помощью css.

Answer 1

Обновленный ответ в соответствии с отредактированной вопрос ...

Если вы хотите, чтобы скрыть только <h3> элементы, то:

.evaluation>h3 { display: none; } 
.evaluation:nth-of-type(2)>h3 { display: block; } 

Если вы хотите, чтобы скрыть <div> элементы, содержащие элементы <h3> , затем:

.evaluation { display: none; } 
.evaluation:nth-of-type(2) { display: block; } 

В качестве альтернативы вы можете сделать ...

.evaluation:not(:nth-of-type(2))>h3 { display: none; } 

или ...

.evaluation:not(:nth-of-type(2)) { display: none; } 

Answer 2

Если он всегда будет иметь структуру в вашем примере:

.evaluation + .evaluation h3 {display:none}