Как скрыть только первый элемент типа?

Question

У меня есть следующий код:

<div class="ctr-1"> 
    <h3>Title</h3> 
    <div class="ctr-2"> 
     <h3>Title</h3> 
    </div> 
</div> 

И следующий CSS

.ctr-1 h3:first-child{ display:none; } 

Оба <h3> теги скрыты, я только хочу, чтобы первый один скрытый. Как?

Answer 1

Это то, что first-of-type и nth-of-type селекторы для.

Например:

.ctr-1 h3:first-of-type { display:none; } 
/* - Or - */ 
.ctr-1 h3:nth-of-type(0) { display:none; } 

Это скроет первый h3 потомок .ctr-1, независимо от его местоположения внутри родительского элемента.

Конечно, в вашем конкретном примере h3 действительно также непосредственным (>) и первый (:first-child) потомок .ctr-1. Но если это совпадение, вы, возможно, не сможете положиться на него. В этом случае nth-of-type - это путь.

---

Редактировать

Как было отмечено в комментарии по @crush, это CSS3 селекторы, которые применимы к IE9 и выше. Ссылка: Can I use CSS3 selectors?

Answer 2

Они оба технически являются first-child.

В вашем примере, вы могли бы сделать:

.ctr-1 > h3:first-child { display:none; } 

Answer 3

Вы неправильно, ctr не существует, и вы должны сказать с >, чтобы выбрать первый уровень элемента в вашем селекторе страницы попробуйте следующее:

.ctr-1 > h3:first-child{ display:none; } 

Answer 4

Как это:

.ctr-1 > h3:first-child { 
    display:none; 
} 

jsFiddle here

Answer 5

Вы можете использовать:

.ctr-1 > h3 { display: none; }