Ejemplos Prácticos de Selectores de Atributos CSS

Seguro ya conoces los selectores de atributos de CSS, pero ¿conoces todas las variaciones y que usos prácticos se les puede dar?. En este tutorial veremos todos los tipos de selectores de atributo disponibles y ademas algunos ejemplos aplicables que tal vez te sean de utilidad.

Nota: En este tutorial voy a utilizar CodePen para los ejemplos, para un mejor entendimiento recuerda mirar el codigo en el orden: HTML » CSS » Resultado.

¿Qué son los selectores de atributos CSS?

Son selectores que se basan en el atributo del elemento HTML para seleccionarlo, se usan corchetes [].

Por ejemplo si tenemos un:

<p align="right">

</p>

Podemos seleccionarlo en CSS con:

p[align="right"]{

}

Tambien se puede obviar la declaración del tipo de elemento y seleccionar unicamente con el atributo:

[align="right"]{

}

Existen una serie de variaciones en las cuales podemos refinar la selección siendo mas especificos, si tienes conocimiento de expresiones regulares, esto te sera facil ya que los términos son similares.

Ejemplos

1. [attr=valor]

El uso mas básico, donde se declara exactamente el atributo y el valor indicado que este debe llevar para que sea seleccionado.

Ejemplo:

Digamos que tenemos una serie de elementos input y como sabemos, estos tienen que llevar el atributo type en donde se declara que tipo de campo sera, mediante los selectores de atributo podemos estilizar cada uno de los tipos de input individualmente sin declararle clase alguna:

See the Pen #1 Selector de Atributo = by josueochoa (@josueochoa) on CodePen.

2. [attr^=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado comience con lo que se indica.

Ejemplo:

Un uso práctico seria por ejemplo ponerles iconos a una serie de enlaces a redes sociales, donde detectamos a que red social esta enlazando (el enlace debe empezar con http://face…) y de acuerdo a ello ponemos el icono respectivo:

See the Pen #2 Selector de atributo ^= by josueochoa (@josueochoa) on CodePen.

3. [attr$=valor]

Este selector es lo invertido al anterior, seleccionará a los elementos que tengan ese atributo y cuyo valor declarado termine con lo que se indica.

Ejemplo:

El uso mas común que se le da a este tipo de selector es para estilizar enlaces de descarga de archivos, en el cual la ruta termina en el formato de archivo (http://…/documento.doc), el cual usamos para hacer una selección individual:

See the Pen #3 Selector de Atributo $= by josueochoa (@josueochoa) on CodePen.

4. [attr*=valor]

Este selector es el que tiene mas alcance, ya que como ven lleva el *, lo que indica que es global, va a seleccionar el elemento que tenga el valor indicado este donde este.

Ejemplo:

Un ejemplo práctico es cuando trabajamos con los menús de WordPress y queremos aplicar estilo al elemento activo o current, pero WordPress nos añade un montón de clases y al final no logramos lo cometido o terminamos con un CSS muy desordenado, para estos casos podemos usar el selector de atributo global *=:

See the Pen #4 Selectores de Atributos *= by josueochoa (@josueochoa) on CodePen.

5. [attr~=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre espacios.

Ejemplo:

Esta tipo de selector se usa casi siempre para seleccionar elementos que tengan atributos con multiples valores, tales como el atributo rel de un a, en este ejemplo tendremos un par de parrafos en los cuales habran varios enlaces a los que les pondremos multiples valores rel, pero colorearemos de verde solo los que sean external:

See the Pen #5 Selector de Atributo ~= by josueochoa (@josueochoa) on CodePen.

6. [attr|=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre guiones.

Ejemplo:

Para este selector haremos un ejemplo un poco mas complicado: lo usaremos para hacer una pequeña grilla CSS, en la cual las propiedades se aplicaran a las columnas solo por el hecho de que la clase de estas contenga la palabra grid-, seguido ira el numero que indique el ancho de esa columna:

See the Pen #6 Selector de atributo |= by josueochoa (@josueochoa) on CodePen.

Compatibilidad

Cada uno de estos selectores funciona perfectamente en todos los navegadores modernos. Incluso Internet Explorer lo viene soportando a partir de la version 7.