Estilizar desde el estado en CSS

El estado vive en un atributo que el script ya debe fijar, y la lista de clases queda quieta.

[data-state="loading"] { opacity: 0.6; pointer-events: none; }
[data-state="error"] { border-color: #dc2626; }

[aria-expanded="true"] .chevron { rotate: 180deg; }
[aria-current="page"] { font-weight: 600; }
[aria-busy="true"] { cursor: progress; }

.field:has(input:disabled) { color: #94a3b8; }

.accordion:has([aria-expanded="true"]) { background: #f8fafc; }

Cómo funciona

1. [data-state="open"] se lee como estado y no como nombre.
2. Los atributos ARIA también son estado, y estilizarlos mantiene ambos al paso.
3. :has() deja que un padre responda al estado de un hijo.

Palabras clave y builtins usados aquí

• background
• color
• cursor
• deg
• opacity
• rotate

El intento, en números

Líneas

10

Caracteres a escribir

361

Tokens

94

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 66 segundos.

Escribe este fragmento

Paso 3 de 3 en Ponerle nombre a las cosas; paso 6 de 9 en Organizar el CSS.

← Anterior Siguiente →