Selectores de atributo en CSS

Coincidir por la presencia de un atributo o por la forma de su valor.

input[required] {
  border-color: #7c5cff;
}

a[href^="https://"] {
  text-decoration-style: dotted;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
}

li[data-locked="true"] {
  opacity: 0.5;
}

Cómo funciona

1. [attr=value] es exacto; [attr^=...] coincide con un prefijo.
2. $= coincide con un sufijo y *= en cualquier parte.
3. La bandera i vuelve la comparación insensible a mayúsculas.

Palabras clave y builtins usados aquí

• content
• opacity

El intento, en números

Líneas

15

Caracteres a escribir

187

Tokens

50

Ritmo de tres estrellas

70 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →