Come targetizzare uno specifico elemento <img> di un div in CSS?

Question

Ho un codice di qualche cosa in questo modo:

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

Ora la mia domanda è: Come faccio a indirizzare una specifica immagine in CSS quando avere il codice di cui sopra?

Answer 1

È possibile aggiungere una classe alle immagini O

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

o

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

Answer 2

div > img:first-child {/*the first image*/} 
div > img:last-child {/*the last image*/} 

Che dovrebbe farlo.

Answer 3

Tutte le seguenti soluzioni funzionano solo negli ultimi browser.

È possibile selezionare in base alla posizione del bambino:

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

È possibile selezionare in base alla posizione del bambino, contando solo immagini:

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

È possibile selezionare da URL immagine:

#foo img[src^=bar] { /* for the bar */ } 
#foo img[src^=cat] { /* for the cat */ } 

Answer 4

Dipende interamente da quale immagine si desidera targetizzare. Supponendo che sia la prima (anche se le implementazioni sono simili per entrambi) immagine:

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


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

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

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

Riferimenti:

• CSS3 selectors.

Answer 5

#foo > IMG:first-child {/* first of two IMGs */} 
#foo > IMG + IMG  {/* second one */} 

funziona in tutti i browser tra cui IE7 +.

Answer 6

Non so perché tutti siano così fissi sul # foo div. Puoi scegliere come target il tag img e non preoccuparti nemmeno del tag div. Questi selettori di attributi selezionano per "inizia con".

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

Questi selezionare per "contiene".

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

In alternativa è possibile selezionare dalla src esatto.

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

Se si desidera targetizzarli entrambi, è possibile utilizzare l'ID div.

#foo img { css } 

Per solo una delle immagini, non c'è bisogno di preoccuparsi per la div #foo a tutti.