CSS

:has() en profundidad: lógica visual sin JavaScript

Domina :has() para estilizar padres y relaciones entre elementos, con casos reales de formularios, tarjetas y estados de interfaz.

¿Cuánto sabes de CSS?

📘 Teoría

Modelo mental correcto

Piensa en :has() como una condición booleana sobre el elemento actual.

En .card:has(img), no seleccionas la imagen: seleccionas la tarjeta si contiene una imagen. Esto cambia la forma de pensar CSS, porque puedes estilizar el contenedor según lo que ocurre dentro.

En formularios, :has() permite reglas globales de estado: por ejemplo, form:has(:invalid) o .field:has(input:focus). El resultado es menos JavaScript y menos clases temporales.

Seleccionar padres por contenido o estado interno.
Construir feedback visual sin depender de eventos JS.
Reducir clases auxiliares y mantener HTML más limpio.

Patrones reales con :has()

Tres patrones que usarás de forma recurrente en producto.

Patrón 1: tarjeta con contenido enriquecido. Si una card contiene imagen, aumenta contraste visual para priorizarla.

Patrón 2: campo activo. El wrapper del input responde al foco y mejora la percepción de interacción.

Patrón 3: formulario inválido. El botón de envío refleja estado global y reduce errores de envío prematuro.

Ejemplos prácticos

.card:has(img) {
  border-color: #f59e0b;
}

.form-row:has(input:focus) {
  outline: 2px solid #2563eb;
}

form:has(:invalid) .submit {
  opacity: 0.5;
  pointer-events: none;
}

Buenas prácticas

Evita cadenas difíciles de leer como :has(:not(...):is(...)) cuando no aporten valor claro. Prioriza reglas legibles por componente.

Acota el alcance del selector: .checkout-form:has(:invalid) suele ser mejor que un form:has(:invalid) global.

Cuando la condición sea crítica para negocio, documenta la intención con comentarios breves para facilitar mantenimiento.

1 Modelo mental correcto 2 Patrones reales con :has() 3 Buenas prácticas

🧪 Aprende probando

Ejemplo Demo interactiva: formulario contextual El contenedor cambia cuando hay foco o errores.

⌄

🏁 Retos

Reto Reto: tarjeta condicional Resalta .card solo si contiene una imagen.

⌄

🧰 Recursos

Enlaces útiles

MDN - :has()

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 54

Selectores funcionales: :is(), :where(), :not() y patrones combinados

Lección 56

Input hack en CSS: toggles y menús sin JavaScript

›