Pseudoclases en CSS

Selectores de estado: hover, focus, disabled y los estructurales.

.button:hover {
  background: #2a2f3a;
}

.button:focus-visible {
  outline: 2px solid #7c5cff;
  outline-offset: 2px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.step:not(:last-child) {
  border-bottom: 1px solid #222;
}

Cómo funciona

1. :focus-visible muestra un anillo solo para quien usa teclado.
2. :is() agrupa selectores sin subir la especificidad.
3. :not() excluye, y :first-child cuenta la posición.

Palabras clave y builtins usados aquí

• background
• cursor
• opacity
• outline
• px

El intento, en números

Líneas

17

Caracteres a escribir

230

Tokens

59

Ritmo de tres estrellas

70 tpm

Al ritmo de tres estrellas de 70 tokens por minuto, este intento toma unos 51 segundos.

Escribe este fragmento

Paso 5 de 6 en Selectores; paso 5 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →