El selector de padre en CSS

:has() por fin deja que una regla dependa de lo que un elemento contiene.

/* una tarjeta que contiene una imagen recibe otro layout */
.card:has(img) {
  display: grid;
  grid-template-columns: 8rem 1fr;
}

/* el campo, estilizado según el estado del input que contiene */
.field:has(input:invalid) { border-inline-start: 3px solid #dc2626; }
.field:has(input:focus-visible) { background: #f8fafc; }

/* un formulario sin nada completado todavía */
form:has(input:not(:placeholder-shown)) .actions { opacity: 1; }

/* el caso del hermano: un encabezado seguido de un figure */
h2:has(+ figure) { margin-block-end: 0.5rem; }

Cómo funciona

1. :has() coincide con el elemento exterior, no con lo que tiene adentro.
2. Se lee hacia adelante: una etiqueta que tiene un input inválido adentro.
3. Su especificidad es la de su argumento más específico.

Palabras clave y builtins usados aquí

• background
• display
• grid
• opacity
• px
• rem

El intento, en números

Líneas

15

Caracteres a escribir

545

Tokens

91

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

Paso 1 de 3 en Selectores que hacen preguntas; paso 8 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →