Selectores de atributos en CSS

Selector de presencia

El selector de presencia se enfoca en elementos que tienen un atributo específico, sin importar su valor. La sintaxis para el selector de presencia es:

[attribute] {
  /* Estilos CSS */
}

Para seleccionar todos los elementos <a> que tienen un atributo title:

a[title] {
  /* Estilos CSS */
}

Este selector coincidirá con cualquier elemento <a> que tenga un atributo title, sin importar cuál sea el valor del atributo.

Selector de igualdad

El selector de igualdad se enfoca en elementos con un valor de atributo igual a un valor específico. La sintaxis para el selector de igualdad es:

[attribute="value"] {
  /* Estilos CSS */
}

Para seleccionar todos los elementos <input> con un valor de atributo type de "submit":

input[type="submit"] {
  /* Estilos CSS */
}

Por defecto, el selector de igualdad distingue entre mayúsculas y minúsculas. Para realizar una coincidencia sin distinción de mayúsculas y minúsculas, añade una i antes del corchete de cierre:

[attribute="value" i] {
  /* Estilos CSS */
}

Selectores de subcadena

Los selectores de subcadena se enfocan en elementos con un valor de atributo que contiene una subcadena específica. Hay tres tipos de selectores de subcadena:

1. Selector Comienza con ([attribute^="value"]): Selecciona elementos con un valor de atributo que comienza con el valor especificado.
2. Selector Termina con ([attribute$="value"]): Selecciona elementos con un valor de atributo que termina con el valor especificado.
3. Selector Contiene ([attribute*="value"]): Selecciona elementos con un valor de atributo que contiene el valor especificado en cualquier parte de la cadena.

Ejemplos de cada selector de subcadena:

[data-category^="top"] {
  /* Estilos CSS */
}

[href$=".pdf"] {
  /* Estilos CSS */
}

[class*="featured"] {
  /* Estilos CSS */ 
}

Selectores de sufijo y prefijo

Los selectores de sufijo y prefijo son similares a los selectores de subcadena que comienzan con y terminan con, pero coinciden con valores completos en lugar de solo partes.

• Prefijo: [attribute|='value']: Coincide con atributos iguales o que comienzan seguidos por un guion (-).
• Sufijo: No está soportado en CSS

Ejemplo:

/* Coincide con lang='en' o comienza con 'en-'*/ 
 [lang|='en'] {   
   /* Estilos CSS */
 }

Aplicar estilos a elementos de formulario

Los selectores de atributos se usan comúnmente para aplicar estilos a elementos de formulario según sus atributos.

input[required], 
textarea[required] {
  border: 1px solid red;
}

También puedes aplicar estilos a elementos de formulario según su tipo:

input[type="text"] {
  background-color: #f0f0f0;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

Aplicar estilos a enlaces

Los selectores de atributos pueden usarse para aplicar estilos a enlaces según su atributo href.

a[href^="http"]:after {
  content: "↗️";
}

También puedes aplicar estilos a enlaces que apuntan a un tipo de archivo específico, como PDFs:

a[href$=".pdf"] {
  background-image: url('pdf-icon.png');
  padding-left: 20px;
}

Seleccionar atributos de datos personalizados

HTML5 introdujo atributos de datos personalizados, que permiten almacenar información adicional en los elementos. Puedes usar selectores de atributos para seleccionar estos atributos personalizados y aplicar estilos según sus valores.

<div data-theme="dark">Modo oscuro</div>
<div data-theme="light">Modo claro</div>

[data-theme="dark"] {
  background-color: #333;
  color: white;
}

[data-theme="light"] {
  background-color: white;
  color: #333;
}

Internacionalización

Los selectores de atributos pueden usarse para aplicar estilos a elementos según el atributo lang, que especifica el idioma del contenido del elemento. Esto es útil para sitios que admiten varios idiomas.

[lang|="en"] {
  font-family: "English Font", sans-serif;
}

[lang|="ja"] {
  font-family: "Japanese Font", serif.
}

Escribe selectores eficientes

Aunque los selectores de atributos son útiles, usarlos en exceso puede llevar a un CSS complejo e ineficiente. Úsalos con moderación y combínalos con clases u otros selectores más simples cuando sea posible.

/* Menos eficiente */
[data-type="button"][data-size="large"][data-color="primary"] {
  /* estilos */
}

/* Más eficiente */
.btn-lg-primary {
  /* estilos */
}

Evita el uso excesivo

Evita usar selectores de atributos para dar estilo a un gran número de elementos. Aplicar estilos a elementos como [class] o [href] puede coincidir con muchos elementos y ralentizar tu página. En su lugar, usa selectores o clases más específicos.

/* Evita esto */
[href] {
  color: blue;
}

/* En su lugar, usa una clase o un selector más específico */
a {
  color: blue;
}

Considera la especificidad

Los selectores de atributos tienen mayor especificidad que los selectores de clase, pseudo-clase o elemento, pero menor especificidad que los IDs. Esto significa que los estilos aplicados con selectores de atributos pueden ser difíciles de anular.

Para manejar la especificidad, intenta usar selectores de atributos en combinación con clases en lugar de por sí solos. Esto hace que tus estilos sean más modulares y fáciles de trabajar.

/* Mayor especificidad, más difícil de anular */
[type="text"] {
  border: 1px solid black;
}

/* Menor especificidad, más modular */
.text-input[type="text"] {
  border: 1px solid black;
}