¿Cómo apuntar un elemento específico <img> de un div en CSS?

Question

tengo un código de algunos lo que de esta manera:

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

Ahora mi pregunta es ¿cómo puedo orientar una imagen específica en el CSS al tener el código anterior?

Answer 1

Usted puede agregar una clase a las imágenes 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*/} 

Eso debería hacerlo.

Answer 3

Todas las siguientes soluciones sólo funcionan en los navegadores recientes.

Puede seleccionar por la posición del niño:

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

Se pueden seleccionar por la posición del niño, contando sólo las imágenes:

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

Se pueden seleccionar mediante URL de la imagen:

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

Answer 4

Depende completamente de la imagen a la que desee orientarse. Asumiendo que es la primera (aunque las implementaciones son similares para ambos) Imagen:

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


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

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

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

Referencias:

• CSS3 selectors.

Answer 5

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

funciona en todos los navegadores, incluyendo Internet Explorer 7 +.

Answer 6

No sé por qué todos están tan concentrados en el div #foo. Puede orientar la etiqueta img y ni siquiera preocuparse por la etiqueta div. Estos selectores de atributos seleccionan por "comienza con".

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

Estos seleccionan por "contiene".

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

O puede seleccionar por el src exacto.

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

Si desea orientarlos a ambos, puede usar la identificación div.

#foo img { css } 

Para solo una de las imágenes, no hay necesidad de preocuparse por el div #foo en absoluto.