💙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!
🧵🔽
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).
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.
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:
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.
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>`
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 :-)
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
➡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?
• • •
Missing some Tweet in this thread? You can try to
force a refresh
