web-dev-qa-db-fra.com

Comment cibler un élément <img> spécifique d'un div en CSS?

J'ai un code de ce qui ressemble à ceci:

<div id="foo">
 <img src="bar.png" align="right">
 <img src="cat.png" align="right"> 
</div>

Maintenant, ma question est: comment cibler une image spécifique en CSS avec le code ci-dessus?

htmlcss
9
Netizen110

Vous pouvez ajouter une classe aux images OU

#foo img:nth-child(2) { css here }

ou

#foo img:first-child { css here }
#foo img:last-child { css here }
13
chadpeppers

Cela dépend entièrement de l'image que vous souhaitez cibler. En supposant que ce soit la première (bien que les implémentations soient similaires pour les deux) image:

#foo img[src="bar.png"] {
    /* css */
}


#foo img[src^="bar.png"] {
    /* css */
}

#foo img:first-child {
    /* css */
}

#foo img:nth-of-type(1) {
    /* css */
}

Références:

14
David Thomas

Je ne sais pas pourquoi tout le monde est si attaché à la #foo div. Vous pouvez cibler la balise img sans même vous soucier de la balise div. Ces sélecteurs d'attributs sélectionnent par "commence par".

img[src^=bar] { css }
img[src^=cat] { css }

Ceux-ci sélectionnent par "contient".

img[src*="bar"] { css }
img[src*="cat"] { css }

Ou vous pouvez sélectionner par le src exact.

img[src="bar.png"] { css }
img[src="cat.png"] { css }

Si vous voulez les cibler tous les deux, vous pouvez utiliser l'identifiant div.

#foo img { css }

Pour une seule des images, il n’ya aucune raison de s’inquiéter de la #foo div.

9
Harry The Mad Lurker
div > img:first-child {/*the first image*/}
div > img:last-child {/*the last image*/}

Ça devrait le faire.

1
Niet the Dark Absol

Toutes les solutions suivantes ne fonctionnent que dans les navigateurs récents.

Vous pouvez sélectionner par position enfant:

 #foo img:first-child { /* for the bar */ }
 #foo img:nth-child(2) { /* for the cat */ }

Vous pouvez sélectionner par position d’enfant, en ne comptant que les images:

 #foo img:first-of-type { /* for the bar */ }
 #foo img:nth-of-type(2) { /* for the cat */ }

Vous pouvez sélectionner par URL de l'image:

 #foo img[src^=bar] { /* for the bar */ }
 #foo img[src^=cat] { /* for the cat */ }
0
Andres Riofrio
#foo > IMG:first-child {/* first of two IMGs */}
#foo > IMG + IMG       {/* second one */}

Fonctionne dans tous les navigateurs, y compris IE7 +.

0
Marat Tanalin