Personalizar primera imagen de una lista

[hippoi]

Hola, a ver si me podeis ayudar,

TEngo una lista on varios li y en cada uno de ellos aparece una imagen y otras informacion.

<ul>
<li>
<img src="uno.jpg" />
<p> algo </p>
</li>
<li>
<img src="dos.jpg" />
<p> algo </p>
</li>
<li>
<img src="tres.jpg" />
<p> algo </p>
</li>
</ul>

Lo que quiero hacer es que se visulice solo la primera image y el resto no.

He intetado hacerlo con css, de este modo


ul img {display:none} //dejo de ver todas las imagenes
ul img:first-child {display:block} // visualizao la primera imagen

Pero no lo consigo.

Alguien me puede ayudar?

[Panicav]

No comprendo mucho, puedes utilizar PHP quizás para ello, sin tener mayores problemas, el tema es de donde proviene dicha data, si es de un bucle, o es código html puro, saludos.

[hippoi]

Es para un Wordpress de eventos,

Para todos los eventos me parece una imagen dentro de un <li>, yo solo quiero visualizar la primera, las demas no.

[furoya]

¿Qué tienen en este Foro contra las etiquetas [code]?

Código:

<style type="text/css">
ul img {visibility: hidden;}
ul > li:first-child img {visibility: visible;}
</style>

Busca en la web información sobre selectores CSS y pseudo clases o pseudo elementos CSS.

[hippoi]

Iniciado por furoya

¿Qué tienen en este Foro contra las etiquetas [code]?

Código:

<style type="text/css">
ul img {visibility: hidden;}
ul > li:first-child img {visibility: visible;}
</style>

Busca en la web información sobre selectores CSS y pseudo clases o pseudo elementos CSS.

MUCHISIMAS GRACIAS.

Me has resuelto la papeleta, no habia caida en la pesudo.clase >

[kseso?]

Otra forma, un poco más "multinavegador" y teniendo en cuenta que una lista (ul) sólo puede tener li´s como hijos directos:

Código CSS:

li img {
  /*declaraciones oportunas*/
}
 
li + li img {display: none;}
 

[furoya]

Cierto. Me olvidé del IE.
En la versión 6 no anda ninguno de los dos .

Entonces habrá que "reescribir" con JavaScript. ¿Se podrá usar en uorpres, o te lo bloquea?