¿Cómo funciona :has()?
:has() es un selector o pseudo-clase que indica que vamos a aplicarle estilo al elemento superior que se encuentra antes de un elemento determinado.
El elemento posterior al que nosotros queremos es un elemento hijo o un elemento hermano.
Otra forma de explicarlo es la siguiente:
:has() verifica si un elemento cualquiera contiene al menos un elemento que coincida con la condición que va como parámetro.
Nota: has() traducido literalmente al español significa ❝ tiene❞, entonces podríamos decir qué. Al elemento que tiene este otro elemento como referencia es al que le aplicamos el estilo.
Sintaxis:
a: Elemento al que queremos ubicar.
b: Elemento de referencia para encontrar ❝ a❞ .
a:has(b) {
/* Los atributos a modificar */
}
Ejemplo # 1
Cambiar el color al elemento <p> que esta al mismo nivel que <strong> con :has().
HTML
<p> Este es un </p> <strong> texto importante. </strong>
CSS
p:has(+strong){
color: #a480e3;
}
El resultado queda así:
El símbolo ❝ +❞ indica que seleccionamos el elemento que está exactamente al lado.
Ejemplo # 2
Cambiar el color al elemento padre de <h1> con :has().
HTML
<div class="container"> <h1>Ejemplos de :has()</h1> </div>
CSS
.container:has(h1){
color: #ff72c4;
}
Otra forma de expresar lo mismo con css es la siguiente:
.container:has(>h1){
color: #ff72c4;
}
En este caso el símbolo ❝ >❞ indica que <h1> es hijo directo de ❝ container❞.
El resultado se ve así:
Como el ❝ container❞ no tiene texto y el <h1> esta dentro del ❝ container❞, entonces el <h1> también es afectado por el cambio de color.
Ejemplo # 3
Al <h1> que tiene un elemento hermano <h3> cambiar el color.
HTML
<h1> Soy el h1 </h1> <h2> Soy el h2 </h2> <h3> Soy el h3 </h3>
CSS
h1:has(~h3){
color: #5fff65;
}
Si bien el <h3> es hermano de <h1> porque está al mismo nivel, este no está directamente cerca. Por ese motivo se usa el símbolo ❝ ~❞.
Ejemplo # 4
Al elemento padre <a> que tiene un <img> alinear con gird.
En este caso tenemos 2 <a> una con un hijo <img> y la otra no, Y vemos que el estilo solo es aplicado al elemento que coincide con la condición de tener un <img> como hijo.
HTML
<a href="https://ney.one/"> Blog de Ney </a> <br/> <a href="https://kj2.me/"> Blog de KJ <img src="kj_face.png" alt="Kj"> </a>
CSS
a:has(img){
font-size:25px;
display: grid;
place-content: center;
}
El resultado se ve así:
Si quieres ver el archivo con todos los ejemplos sencillos están en github.
