Cinco selectores especiales

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"