# CSS Tip: #1 - has()
Tags: css, tip, webdev, spanish
Published: 2022-04-10 19:14:07

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:

```html
<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:

```css
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:

```css
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:

```css
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:

```css
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.

---
**Nota:** para obtener más información acerca de cómo funciona la función `has()` se recomienda leer [esta entrada](https://developer.mozilla.org/es/docs/Web/CSS/:has) de la MDN.