Selector de atributo

¿Qué es?

Se escribe entre corchetes ([atributo]) y permite seleccionar elementos por la simple presencia de un atributo, por su valor exacto, o por una coincidencia parcial de ese valor. Es muy útil para estilar formularios o enlaces sin depender de clases adicionales.

Presencia y valor exacto

/* Cualquier elemento que tenga el atributo "disabled", sea cual sea su valor */
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Solo los <input> cuyo atributo type valga exactamente "email" */
input[type="email"] {
  border-color: #5b9bd5;
}

Coincidencias parciales

También se pueden usar operadores para matchear una parte del valor, muy parecido a como funcionan las expresiones regulares simples.

/* ^= : el valor EMPIEZA con "https" */
a[href^="https"] {
  color: green;
}

/* $= : el valor TERMINA con ".pdf" */
a[href$=".pdf"] {
  font-weight: 600;
}

/* *= : el valor CONTIENE "docs" en cualquier parte */
a[href*="docs"] {
  text-decoration: underline;
}

/* ~= : el valor es una de las palabras separadas por espacio */
[class~="destacado"] {
  background: yellow;
}

Una combinación clásica es marcar visualmente los enlaces externos que abren en PDF, o distinguir links que van a un dominio distinto, sin tener que agregarles una clase manualmente en el HTML.