Los selectores de atributos permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas propiedades. Supongamos que hemos creado varias clases de párrafos y queremos identificar a todos aquellos que tengan especificado el atributo class (cualquiera sea el valor de ese atributo) para darle un margen izquierdo de 1 cm:
p[class] {margin-left: 1cm}
Ahora, si queremos seleccionar solamente aquellos párrafos que tengan
el atributo class="pregunta", debemos usar:
p[class="pregunta"] {margin-left: 1cm}
Podemos usar varios selectores de atributos para hacer aún más
específica la regla. Supongamos que a ciertos párrafos con class="pregunta"
también le hemos asignado el atributo width y queremos darle
un margen izquierdo de 2 cm.
p[class="pregunta"][width] {margin-left: 2cm}
Hemos visto dos formas que pueden tomar estos selectores: [atributo]
y [atributo=valor]. Adicionalmente, existen dos fórmulas
para este tipo de selectores que se utilizan cuando a un determinado elemento
se le han asignado una lista de valores en vez de un solo valor (más adelante
en esta guía veremos los casos específicos).
[atributo~=valor] se usa para seleccionar los elementos que tienen
como atributo una lista de palabras separadas por espacios, una de las
cuales es exactamente valor.
[atributo|=valor] se usa para seleccionar los elementos que tienen
como atributo una lista de palabras separadas por guiones, comenzando por valor.
Veamos un ejemplo de los dos casos:
img[alt~="logotipo"] {border: solid}
p[lang|="en"] {font-family: "Times New Roman", Serif}
El primero selecciona las imágenes cuyo atributo ALT tiene
en su valor la palabra logotipo, como en ALT="logotipo de
la compañía" o alt="éste es nuestro
logotipo". El segundo, selecciona los párrafos que tienen
asignado como valor del atributo lang palabras que comienzan con
en, como en-US o en-cockney.