¿A qué nos referimos cuando hablamos de ‘Selectores por atributo’?

Estamos hablando de una característica del código CSS que toma información del HTML. Sabemos que las etiquetas en HTML pueden tener varios atributos (class, style, title, target, etc…). Esos atributos los podemos utilizar en CSS para definir estilos privados sin tener que añadir un class al código HTML.

¿Y por qué no añadir un class a la etiqueta en el HTML?

Puede haber veces en las que no podamos acceder a los archivos HTML o que no podamos cambiarlos por cuestiones del proyecto. En ese caso podemos hacer uso de los selectores para aplicar nuestros estilos.

Un ejemplo: Imagina que tenemos un formulario en HTML con un cuadro de introducción de texto, varios botones,… y queremos dar un estilo distinto a cada uno de ellos. Un estilo para los cuadros de introducción de texto y otro para los botones. Haciendo uso de los selectores por atributo podemos decirle “si el input es de tipo ‘text’ aplica este estilo”.

¿Qué tipo de selectores hay?

Hay que dejar claro que los selectores se encuentran a partir de la versión CSS2. Existen un número reducido de selectores en esta versión que sin embargo se han ampliado para la próxima versión de CSS3.

Selectores por atributos en CSS2

etiqueta[atributo]: Se aplican los estilos a todas las etiquetas que tengan ese atributo.
Ej.

a[title]{
  text-decoration:none;
}

Esta regla hará que todos los enlaces que tengan un título dentro de su etiqueta aparezcan sin línea inferior.

etiqueta[atributo=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo con ese valor.

a[lang=es]{
  background:transparent url(img/esp.gif) no-repeat center right;
}

Esta regla hará que aparezca una imagen a la derecha del enlace que tenga el valor ‘es’ para el atributo ‘lang’.

etiqueta[atributo~=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que uno de sus valores -separados por espacios- sea el valor.

a[title~=descargar]{
  background:transparent url(img/down.gif) no-repeat center right;
}

<a href="#" title="Click para descargar">Descargar<a>

Esta regla hará que aparezca una imagen a la derecha del enlace que tenga en el atributo title la palabra descargar.

etiqueta[atributo|=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que sea igual a valor o a valor seguido de un guíon “-”.

a[title|=Enlace Externo]{
  background:transparent url(img/arrow.gif) no-repeat center right;
}

<a href="#" title="Enlace Externo: Abre la web de la W3C">W3C<a>

Esta regla permitirá indicar una imagen de una flecha para los enlaces que su title tengan ‘Enlace Externo’

Selectores por atributos en CSS3

etiqueta[atributo^=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que comience con valor.

a[title^=Enla]{
  color:#FF0000;
}

<a href="#" title="Enlace a...">Enlace 1</a>
<a href="#" title="Enlazable con...">Enlace 2</a>
<a href="#" title="No enlaza con...">Enlace 3</a>

Esta regla hará que tanto el Enlace 1 como el Enlace 2 aparezcan en color rojo, mientras que el Enlace 3 se quedará como estaba.

etiqueta[atributo$=valor]: Se aplican los estilos a todas las etiquetas que tengan dentro de su atributo el valor.

a[title*=enla]{
  color:#FF0000;
}

<a href="#" title="Un enlace a...">Enlace 1</a>
<a href="#" title="Está enlazado con...">Enlace 2</a>
<a href="#" title="Un título distinto...">Enlace 3</a>

Esta regla hará que tanto el Enlace 1 y el Enlace 2 aparezcan en color rojo, mientras que el Enlace 3 se quedará como estaba.

etiqueta[atributo$=valor]: Se aplican los estilos a todas las etiquetas que el atributo acaba con el valor.

a[title$=ero]{
  color:#FF0000;
}

<a href="#" title="Primero">Enlace 1</a>
<a href="#" title="Segundo">Enlace 2</a>
<a href="#" title="Tercero">Enlace 3</a>

Esta regla hará que tanto el Enlace 1 como el Enlace 3 aparezcan en rojo, mientras que el Enlace 2 se quedará como estaba.