La función has() de CSS

La función has() de CSS nos puede servir para poder aplicar un estilo sobre un elemento en función de si se cumple una condición o no. En este pequeño artículo lo que vamos a ver es cómo la podemos utilizarla en un caso concreto.

Supongamos que estamos defiendo los estilos para las etiquetas label de nuestros formularios y lo que queremos es definir un determinado estilo únicamente para todas aquellas label que están asociadas a un elemento del tipo checkbox. Es decir, que nuestro objetivo será que los estilos se apliquen a al elemento input de un marcado como el siguiente:

<label for='my-checkbox'>
  <input id='my-checkbox' type='checkbox' value='my-value' />
</label>

Está claro que lo primero que tenemos que definir es que nuestra reglar css ha de aplicar a todas las etiquetas label del formulario pero vamos a hacer uso de la función has() para poder lanzar una especie de consulta o condición que se tiene que dar para que se apliquen las reglas CSS que queremos aplicar a este tipo label. Es decir, que partiríamos de algo como lo siguiente:

label:has() {
  /* Reglas CSS a aplicar. */
}

Vemos que lo que queremos es invocar a la función has() sobre las etiquetas label y solamente el en el caso de que se cumpla la condición que se recibe como parámetro entonces se aplicarán el conjunto de reglas CSS que vamos a definir.

Pero ¿cómo establecemos que se ha de cumplir la condición? Pues aquí es donde tenemos que hacer uso de los selectores de CSS que conocemos. Tenemos que pensar que lo que queremos es que las regla se apliquen únicamente a los elementos de tipo checkbox y ¿cómo se expresa esto en CSS? Pues con algo como lo siguiente:

input[type="checkbox"]

Ahora bien ¿cómo deberíamos determinar que un estilo se ha de aplicar a los descendientes directos de las etiquetas label que son del tipo checkbox? Pues haríamos uso del operador > (descendiente directo de CSS) como sigue:

label > input[type="checkbox"] {
  /* Reglas CSS a aplicar. */
}

Con esto estamos ya muy cerca de lograr el objetivo que estamos persiguiendo ya que sabemos que ahora el conjunto de reglas CSS que pusiésemos entre llaves se aplicarían al elemento checkbox pero tenemos que recordar que el problema que tratamos de resolver es que el queremos que dichas reglas se apliquen al elemento label. Entonces ¿y si utilizamos este selector como parámetro de la función has()? Es decir, escribimos algo como lo siguiente:

label:has(> input[type="checkbox"]) {
  /* Reglas CSS a aplicar. */
}

Pues la respuesta es que esta es la solución correcta ya que CSS lo que hará será (simplificando la explicación) ver cada una de las etiquetas label e invocará a la función has() sobre las mismas preguntando algo así como ¿tienes un descediente directo que sea un checkbox?. Si la respuesta es que sí, entonces aplica las reglas que te voy a recoger entre llaves; en caso contrario las ignoras.

Deberemos utilizar la función has() de CSS cuando queremos que un conjunto de estilos se apliquen a un determinado elemento cuando se cumple que contiene elementos de determinados tipos.