JMiur [E]

Estos son cinco selectores que se pueden utilizar para crear reglas de estilo que afecten a situaciones específicas (Más información: 1 | 2 | 3)

Todos se utilizan del mismo modo, se aplican a etiquetas, clase o ids y lo que permiten es establecer las propiedades basándose es el contenido de un atributo cualquiera.

Empecemos con un ejemplo simple; esto, haría que los textos de las etiquetas P se vieran de color verde:
p {color:green;}
y esto, haría que se vieran de color amarillo sólo si esa etiqueta tuviera un atributo title:
p[title] {color:yellow;}
lo mismo podría hacerse con cualqueir otro (href src class target alt) y la sintaxis general es:
[atributo]
Pero los selectores permiten mucho más ya que podemos aplicar las reglas de modo más amplio.

[atributo=valor]
de este modo, aplicamos una regla de estilo solo si el atributo es EXACTAMENTE IGUAL al valor

.demo[title="rojo exacto"] {color:red;}
title="rojo" : NO ES EXACTOtitle="rojo exacto" : ESTE SI


[atributo|=valor]
con el carácter | el atributo debe ser EXACTAMENTE IGUAL al valor o este tiene un guión por lo que se aplicará, por ejemplo a rojo-123, rojo-algo, etc.

.demo[title|='rojo'] {color:red;}
title="rojo" : ES EXACTOtitle="no es rojo" : ESTE NOtitle="rojo-123" : incluye guión


[atributo^=valor]
con el carácter ^ detectamos todos los atributos que COMIENZAN con ese valor:

.demo[title^='rojo'] {color:red;}
title="no es rojo" : NOtitle="rojo y algo más" : SI


[atributo$=valor]
con el carácter $ detectamos todos los atributos que TERMINAN con ese valor

.demo[title$='rojo'] {color:red;}
title="este es rojo" : SItitle="rojo y algo más" : NO


[atributo*=valor]
el caracter * sirve de comodín y de este modo, detectamos un atributo que contenga ese valor en cualquier parte:

.demo[title*='rojo'] {color:red;}
title="verde amarillo azul"title="verde rojo azul"title="también es rojo"

Sin comentarios

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR