Comment sélectionner la première balise img dans un div avec de nombreux balise img?

J'ai ce code html :

<div class="image">
   <img src=... />
   <img src= .../>
</div>

Et je voudrais appliquer le style css uniquement à la première image de la div de classe de l'image sans avoir à ajouter une classe à mon premier img (dans ce cas, je ferais .image .img1 mais est-il une autre voie ?

Merci beaucoup pour votre aide

OriginalL'auteur Reveclair | 2013-03-22

  1. 24

    Vous pouvez utiliser le :first-child sélecteur pour ce faire.

    Vous pouvez également utiliser :nth-child(1) (où 1 est = pour le premier enfant, de 2 est égale à la deuxième enfant, etc.)

    Enfin, un plus bonne façon serait l'utilisation de l' :first-of-type

    Par exemple:

    div.image img:first-child {}

    Ou:

    div.image img:nth-child(1) {}

    Ou (si il y a d'autres éléments, par exemple un <h1> qui vient avant tout des images: 

    div img:first-of-type

    Si vous avez le potentiel pour avoir un div avec la classe de l'image qui a des images à l'intérieur et aussi un autre div qui a des images, comme ceci:

    HTML: 

    <div class="image">
   <img src=... />
   <img src= .../>
   <div class="image">
      <img src=... />
      <img src= .../>
   </div>
</div>

    Ensuite utiliser ces sélecteurs:

    Par exemple:

    div.image > img:first-child {}

    Ou:

    div.image > img:nth-child(1) {}

    Ou: 

    div > img:first-of-type

    Documentation sur :first-child et sur :nth-child() et sur :first-of-type et sur enfant combinator.

    Noter que :nth-child() et :first-of-type sont des sélecteurs CSS3, qui portent un soutien limité lors de l'utilisation de IE. Voir Puis-je utiliser des Sélecteurs CSS3 pour la prise en charge du navigateur de détails.

    Envisager quelque chose comme Selectivizr afin d'aider à normaliser IE.

    En quoi est :first-of-type mieux que :first-child si tous les enfants vont être img éléments?
    Édité ma réponse. Dans tous les cas, la première de type serait une meilleure solution globale car elle est plus spécifique à la balise img. Si, à tout point de ce code HTML est modifié pour inclure, par exemple un titre avant que les images (ce qui ne serait pas déraisonnable d'idée), :d'abord l'enfant allait se briser, et la solution serait d'utiliser :first-of-type à corriger. Pourquoi ne pas simplement couper à la chasse et à l'utilisation :first-of-type, en premier lieu? Pas de raison que je peux voir ne pas.
    "prise en charge limitée lors de l'utilisation de IE" seraient considérés comme un. Aussi, Modernizr ne pas polyfill sélecteur de soutien - vous le faire avec Selectivizr à la place.

    OriginalL'auteur Michael

  2. 6

    Vous pouvez le faire en utilisant first-child sélecteur de

    .image img:first-child
{
  height:500px;
  width:200px;
  border:15px solid Red;    
}

    JS Fiddle Exemple

    OriginalL'auteur Sachin

  3. 4

    ': First-child' sélecteur semble comme il pourrait être ce dont vous avez besoin.

    http://www.w3schools.com/cssref/sel_firstchild.asp

    OriginalL'auteur Scott Stroz

  4. 1

    Si vous souhaitez que la première image dans une DIV (et il y a peut être d'autres éléments qui le précède), vous devez first-of-type plutôt que first-child

    div > img:first-of-type {}

    de considérer les éléments suivants html

    <div>
    <p>paragraph, this is :first-child</p>
    <img src="..."><!-- this is img:first-of-type -->
</div>

    Plus de détails peuvent être trouvés à https://developer.mozilla.org/en-US/docs/CSS/:first-of-type

    OriginalL'auteur xec