[SOLUCIONADO] Diferentes estilos para una misma etiqueta

[4589]

Hola

Me acaba de surgir una duda que por más que busco en internet no la encuentro. Seguramente sea una cosa muy sencilla y seguramente no sepa buscarla correctamente en google, por eso os pregunto a vosotros.

Tengo estas dos imágenes dentro de la etiqueta <figure></figure> y en el CSS me gustaría darle unos estilos diferentes a cada una. ¿Cómo lo hago?

<figure>
<img src="../images/p1.png" width="600" height="150"/>
</figure>

<figure>
<img src="../images_design/s1.png" width="600" height="6"/>
</figure>

Gracias!

[DesgraciadoGabo]

tal vez puedas agregarle una clase directamente a la etiqueta img

Código HTML:

<img src="http://www.forosdelweb.com/f53/diferentes-estilos-para-misma-etiqueta-1108294/...." width="" height="" class="tuclass" />
 

en css

Código CSS:

figure > .tuclass1{
  ...
  ...
} /* o tambien */
figure img.tuclass2{
  ...
  ...
}
 

Espero sea lo que buscabas, te mando un saludo

[pzin]

O usando :nth-of-type:

Código CSS:

figure:nth-of-type(1) img {}
figure:nth-of-type(2) img {}
 

[4589]

Gracias por vuestras rápidas respuestas!

Al final he hecho lo siguiente:

Código HTML:

<figure class="f1">
<img src="../images/p1.png" width="600" height="150"/>
</figure> 

Código HTML:

<figure class="f2">
<img src="../images_design/s1.png" width="600" height="6"/>
</figure> 

Y en el CSS he hecho lo siguiente

Código:

/* Figure */

.f1
	{
  	margin: 5px 0px 0px 0px;
	}

.f2 
	{
  	margin: 0px 0px 10px 0px;
	}

¿Estaría bien hecho así? Servir me sirve para lo que quiero hacer. Pero... ¿estaría bien así?... ¿Cambia en algo la estructura del HTLM haciendo que no se entienda alguna etiqueta o algo?

Gracias!

[pzin]

Como tal está bien. No veo demasiado descriptivo los nombres de las clases, pero técnicamente está bien, si.

[4589]

pzin, gracias!!

<figure> y <figure class="f1"> semánticamente significan lo mismo, no?

Que sean más o menos descriptivos los nombres de las clases mientras yo los entienda da igual, no? o ¿hay que poner nombres lo más descriptivos posible para que google entienda mejor la web?

[webosiris]

Iniciado por 4589

<figure> y <figure class="f1"> semánticamente significan lo mismo, no?

si, el significado semántico lo da el tipo de elemento, no las clases que tenga... eso a nivel general, luego las clases si empiezan a tener importancia si se aplican "capas extra" de semántica, como los microformatos.

Que sean más o menos descriptivos los nombres de las clases mientras yo los entienda da igual, no?

si... pero de todas formas creo yo es una buena práctica. Ojo que cuando decimos "nombres descriptivos" nos referimos a que sean descriptivos de su función, no de su apariencia. Por ejemplo, si quieres darle un estilo a un párrafo concreto, el siguiente ejemplo es un MAL ejemplo de nombre:

Código HTML:

<p class="verde">soy un párrafo destacado</p>
 

Código CSS:

.verde{color:green;}
 

porqué es un mal ejemplo? Porque si luego decides que los párrafos destacados no los quieres verdes, los quieres amarillos, te queda de una forma bastante incoherente:

Código CSS:

.verde{color:yellow}
 

Por eso sería mucho mejor por ejemplo este otro caso:

Código HTML:

<p class="destacado">soy un párrafo destacado</p>
 

Código CSS:

.destacado{color:green;}
 

[pzin]

Qué obsesión con Google.

En este subforo de CSS Google es un ente inexistente.

Pues lo que ya te han dicho. Al final es mejor tener un código que entiendas tú y cualquier otro hoy y dentro de seis meses. Porque por aquel entonces, no sabrás qué se suponía que era .f1, pero seguramente un .destacado, aunque no sepas qué es a la primera, será mucho más fácil de localizar qué es.

[4589]

Perfecto, mil gracias!!!

Ahora me surge otra duda. Quiero insertar un vídeo de Vimeo y al meterlo entre la etiqueta vídeo no me funciona. ¿por qué?

[pzin]

Abre un tema nuevo en el subforo correcto si tienes otra duda.