Thread by @Manz

💙La pseudoclase `:has()` llega a CSS💙

Una de las grandes limitaciones que siempre ha tenido CSS es la imposibilidad de dar estilo a "elementos padres" dependiendo de características de los hijos y sin Javascript.

Pero... ¡llega la pseudoclase `:has()`!
¡Te la explico!
🧵🔽

📘En CSS, una pseudoclase es una parte del selector (con prefijo `:`) con la que puedes dar estilo a un elemento con un estado especial.

Por ejemplo, uno de los más conocidos, `:hover`, selecciona el elemento si el usuario está colocando su ratón encima (estado).

💔 Existe un caso particular que puede intentarse resolver, pero que es (era) imposible hacerlo sólo con CSS.

Imaginemos un enlace `<a>` que contiene una imagen. Queremos darle unos estilos al enlace, solo cuando contenga una imagen.

📒 Se llevan +12 años intentando admitir sintaxis relacionadas para permitirlo (combinador `<` o `>>>`, `:parent`, etc...), pero nunca se llega a un consenso.

Sin embargo, con Javascript + CSS es relativamente fácil conseguirlo:

💙En CSS, tradicionalmente se le da estilo al último elemento que indicas.

Ahora, con la pseudoclase `:has()` podemos indicar cuando un elemento tiene unas ciertas propiedades (hijos, atributos, elementos posteriores, etc...) y aplicar estilos a ese padre.

Algunos ejemplos más:

1️⃣ Secciones que no tengan un encabezado `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` o `<h6>`

No tienen porque ser "padres" literalmente, se pueden también hacer cosas como estas:

2️⃣ Encabezados `<h2>` que tengan a continuación un párrafo `<p>`

Compatibilidad. Caso curioso. Safari ha sido pionero desde v15.4, donde ya lo soporta. Justo ayer, Chromium lo ha planificado y está programado para el próximo Chrome 105.

Firefox está en camino: bugzil.la/418039

El resto, esperamos que se pongan las pilas pronto :-)

¿Quieres aprender más sobre CSS? ¿Y en español?
➡lenguajecss.com

También hago streams en Twitch y tienes mis redes sociales en:
💜manz.dev

Todos hemos pasado por esto... Te sientes identificado, ¿verdad?