3.3. Selector de atributos
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributocon un valor igual avalor.[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributoy cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual avalor.[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributoy cuyo valor es una serie de palabras separadas con guiones, pero que comienza convalor. Este tipo de selector sólo es útil para los atributos de tipolangque indican el idioma del contenido del elemento.
A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }