Selectores de atributo

Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.

Prerrequisitos: Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo: Aprender a identificar y utilizar selectores de atributo.

Selectores de presencia y valor

Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo href) o a partir de varias coincidencias diferentes con respecto al valor del atributo.

Selector Ejemplo Descripción
[attr] a[title] Relaciona elementos con un mismo nombre de atributo, attr (el valor que se indica entre corchetes).
[attr=value] a[href="https://example.com"] Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente el mismo, value (la cadena de caracteres que se indica entre corchetes).
[attr~=value] p[class~="special"]

Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente value, o los elementos con un mismo atributo attr que contiene uno o más valores de los cuales, al menos uno, coincide con value.

Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.

[attr|=value] div[lang|="zh"] Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor puede ser exactamente value o puede comenzar con value seguido inmediatamente por un guion.

En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.

  • Mediante el uso de li[class] podemos relacionar cualquier selector con un atributo de clase. Los relaciona todos menos el primer elemento de la lista.
  • li[class="a"] relaciona un selector con una clase de a, pero no un selector con una clase de a con otra clase separada por un espacio como parte del valor. Selecciona el segundo elemento de la lista.
  • li[class~="a"] coincidirá con una clase a pero también con un valor que contenga la clase de a como parte de una lista de elementos separados por un espacio. Selecciona el segundo y el tercer elemento de la lista.

Selectores coincidentes con subcadenas

Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases box-warning y box-error y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con [class^="box-"].

Selector Ejemplo Descripción
[attr^=value] li[class^="box-"] Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor empieza exactamente con la subcadena de caracteres value.
[attr$=value] li[class$="-box"] Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor termina exactamente con la subcadena de caracteres value.
[attr*= ] li[class*="box"] Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor incluye al menos una ocurrencia de la subcadena value en algún punto de la cadena.

El ejemplo siguiente muestra cómo se usan estos selectores:

  • li[class^="a"] relaciona cualquier valor de atributo que empieza con a; luego, relaciona los dos primeros elementos de la lista se verán iguales.
  • li[class$="a"] relaciona cualquier valor de atributo que termina con a; luego, relaciona el primer y el tercer elemento de la lista.
  • li[class*="a"] relaciona cualquier valor de atributo que contiene a en cualquier posición; luego, relaciona todos los elementos de la lista.

Mayúsculas y minúsculas

Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor i antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.

En el ejemplo siguiente, el primer selector relaciona valores que empiezan con a; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.

Nota: Recientemente se ha creado un valor s, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.

Pruébalo

En el ejemplo siguiente, usa el CSS y los selectores de atributos para:

  • Seleccionar el elemento <a> con un atributo title y asignarle un borde de color rosa (border-color: pink).
  • Seleccionar el elemento <a> con un atributo href cuyo valor contenga la palabra contact en algún lugar y asignarle un borde de color naranja (border-color: orange).
  • Seleccionar el elemento <a> con un valor href cuyo valor empiece con https y asignarle un borde de color verde (border-color: green).

Nota: Puedes ver la solución aquí, ¡pero trata de resolverlo primero!

Próximos pasos

Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los selectores de pseudoclases y pseudoelementos.

En este módulo

  1. La cascada y la herencia
  2. Selectores CSS
  3. El modelo de caja
  4. Fondos y bordes
  5. El uso de diferentes direcciones de texto
  6. El desbordamiento de los contenidos
  7. Los valores y las unidades
  8. Elementos de dimensionado en CSS
  9. Imágenes, media y elementos de formulario
  10. Aplicar estilo a las tablas
  11. Depurar el CSS
  12. Organizar el CSS