Selectores de atributos en CSS

Los selectores de atributos permiten seleccionar elementos HTML basados en sus atributos. Proporcionan un control más preciso y flexible, especialmente en formularios y enlaces.

Tipos de selectores de atributos

Los selectores de atributos se pueden usar de varias formas: verificación de existencia, coincidencia exacta o coincidencias parciales (inicio, fin o contenido).

Selector	Descripción
[attr]	Selecciona todos los elementos que poseen el atributo especificado.
[attr="value"]	Selecciona los elementos cuyo atributo coincide exactamente con el valor dado.
[attr^="value"]	Selecciona los elementos cuyo atributo comienza con el valor especificado.
[attr$="value"]	Selecciona los elementos cuyo atributo termina con el valor especificado.
[attr*="value"]	Selecciona los elementos cuyo atributo contiene la cadena especificada.

Selectores de atributos básicos

Los selectores de atributos más simples se basan en la existencia del atributo o en una coincidencia exacta. Se usan comúnmente para enlaces o campos de formulario.

En este ejemplo, se seleccionan enlaces y campos de texto basados en atributos:

Selectores basados en patrones

Los selectores de atributos avanzados permiten coincidencias parciales. Por ejemplo, se puede requerir que un enlace comience con https, termine en .pdf o contenga una palabra específica.

Consejos para usar selectores de atributos

Los selectores de atributos son potentes, pero su uso excesivo puede afectar el rendimiento. Aquí algunos consejos:

Usa coincidencias parciales solo cuando sea necesario.
En formularios, seleccionar por tipo es útil para diferenciar entradas.
Evita patrones demasiado generales para no seleccionar demasiados elementos a la vez.