Comment cacher uniquement le premier élément d'un type?

J'ai le balisage suivant:

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

Et le code CSS suivant

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

Les deux <h3> balises sont cachés, je veux seulement le premier cachés. Comment?

source d'informationauteur Bradley

  1. 14

    C'est ce que le premier-de-type et nth-of-type les sélecteurs sont pour.

    Par exemple:

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

    Cela permettrait de masquer la première h3 descendant de .ctr-1indépendamment de son emplacement à l'intérieur de l'élément parent.

    Accordée, dans votre exemple, le h3 est en effet aussi immédiat (>) et de première (:first-child) descendant de .ctr-1 . Mais si c'est une coïncidence, vous pourriez ne pas être en mesure de compter sur elle. Dans ce cas, nth-of-type est le chemin à parcourir.

    Modifier

    Comme indiqué dans le commentaire de @écraser, ce sont des sélecteurs CSS3 qui sont applicables à IE9 et au-dessus. Référence: Puis-je utiliser des sélecteurs CSS3?

  2. 8

    Ils sont à la fois techniquement le first-child.

    Dans votre exemple, vous pourriez faire:

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

    Comme ceci:

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

    jsFiddle ici

  4. 3

    Vous avez tort, ctr n'existe pas, et vous avez besoin de dire avec > pour sélectionner le premier élément de votre page sélecteur essayez ceci:

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

    Vous pouvez utiliser:

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