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.
Dante Mdz. dice
Excelentes ejemplos sobre como usar estos selectores. Indudablemente ayudan a mejorar la productividad al crear una web.
PD: Muy buena idea usar los snippets incrustados de CodePen.
Mauricio dice
Viejo, acabo de conocer tu blog y estan muy buenos tur articulos, ya me inscribi por RSS, felicidades y quedo atento al proximo tutorial.
simon dice
Hola Josue, una vez mas, gracia e impecable tu trabajo!! que gusto da leerte. Te hago una pregunta, en el ejemplo 6. [attr|=valor] en el CSS que es o como funciona esto:
.wrap [class|=»grid»]:last-child{
last child??!?
gracias por aclararlo.
porque ademas si lo quitas se desvirtua todo!
Josue dice
Hola Simon, disculpa por no haberlo explicado, last-child quiere decir el ultimo elemento, estoy seleccionando al ultimo elemento para quitarle el margen hacia la derecha.
cesar eleazar b r dice
Estimado, he leÃdo acerca d e tus aportes y la verdad son muy buenos, tengo un problema con unos codigo, resulta que a intentar bajar mi archivo pdf de una bases baja el archivo peor al abrirlo me dice que ha tenido error al bajarlo que quiza no sta bien decodificado, este es el código:
Espero em puedas ayudar, saludos