The CSS has() function can be used to apply a style to an element depending on whether a condition is met or not. In this small article we are going to see how we can use it in a specific case.

Suppose we are defining the styles for the label tags of our forms and what we want is to define a certain style only for all those label that are associated to an element of type checkbox. That is, we want the styles to apply to the input element of a markup like the following:

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

It is clear that the first thing we have to define is that our css rule has to apply to all the label tags of the form but we are going to make use of the has() function to be able to launch a kind of query or condition that has to be given in order to apply the CSS rules we want to apply to this type of label. That is to say, we would start from something like the following:

label:has() {
  /* CSS rules to be applied. */
}

We see that what we want is to invoke the has() function on the label tags and only in the case that the condition received as a parameter is met then the set of CSS rules we are going to define will be applied.

But how do we establish that the condition has to be met? Well, this is where we have to make use of the CSS selectors we know. We have to think that what we want is that the rules apply only to elements of type checkbox and how is this expressed in CSS? Well, with something like the following:

input[type="checkbox"]

Now, how should we determine that a style should be applied to the direct descendants of label tags that are of the checkbox type? Well, we would make use of the > operator (direct descendant of CSS as follows:

label > input[type="checkbox"] {
  /* CSS rules to be applied. */
}

With this we are very close to achieving the goal we are pursuing as we know that now the set of CSS rules we put between braces would apply to the checkbox element but we have to remember that the problem we are trying to solve is that we want these rules to apply to the label element. So what if we use this selector as a parameter to the has() function? That is, we write something like the following:

label:has(> input[type="checkbox"]) {
  /* CSS rules to be applied. */
}

Well, the answer is that this is the correct solution because CSS will (to simplify the explanation) look at each of the label tags and invoke the has() function on them asking something like do you have a direct descendant that is a checkbox?. If the answer is yes, then it applies the rules I'm going to give you in braces; otherwise you ignore them.

We should use the CSS has() function when we want a set of styles to be applied to a given element when it is satisfied that it contains elements of certain types.

Nota: para obtener más información acerca de cómo funciona la función has() se recomienda leer esta entrada de la MDN.