Selectores de atributo en CSS3

CSS3 incorpora nuevas formas de referenciar un elemento concreto, con el nuevo selector de atributo podemos referenciar un elemento a través de sus atributos, este nuevo método para referenciar elementos no solo es capaz de encontrar un elemento con un atributo en concreto, además podemos pasarle el valor del atributo, quedará más claro con el ejemplo que te muestro a continuación:

div[name=”parrafo30421″]{color: red;}

Referencia el elemento <div> con un atributo “name” cuyo valor es “parrafo30421”
No es necesario pasarle el valor del atributo, podemos referenciar por ejemplo uno o más elementos <img> con un atributo “title”, y ponerle un borde, solo el elemento o elementos <img> con un atributo “title” tendrán ese borde y no afectará al resto de elementos <img>

img[title]{border: 3px solid #777777;}

Referenciar de forma más avanzada

¿Conoces las expresiones regulares en PHP o JS?
Si conoces estas expresiones y has trabajado con ellas en otros entornos de programación, te resultarán familiares los siguientes selectores:

Selector “^”

Referencia cualquier elemento <div> que tiene un atributo, con un valor que comienza por el valor asignado, al asignarle el valor “pa”, referenciará el elemento <div> con valor “parrafo30421”, que comienza por “pa”

div[name^=”pa”]{color: red;}

Resultado:

parrafo30421

Selector “$”

Referencia cualquier elemento <div> que tiene un atributo, con un valor que finaliza por el valor asignado, al asignarle el valor “421”, referenciará el elemento <div> con valor “parrafo30421”, que finaliza por “421”

div[name$=”421″]{color: red;}

Resultado:

parrafo30421

Selector “*”

Referencia cualquier elemento <div> que tiene un atributo, con un valor que contiene el valor asignado, sea cual sea su posición, al asignarle el valor “fo30”, referenciará el elemento <div> con valor “parrafo30421”, que contiene el contexto “fo30″ en su valor

div[name*=”fo30”]{color: red;}

Resultado:

Selector “~”

Referencia cualquier elemento <div> que tiene un atributo class con un valor que contiene el valor asignado en una lista de valores separados por espacios en blanco, por ejemplo si tenemos un elemento <div> con más de un valor en el atributo class, podemos referenciarlo pasandole uno de los valores

div[class~=”clase2″]{color: red;}

Resultado: