DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for # CSS Tip: #1 - has()
DevJoseManuel
DevJoseManuel

Posted on

# CSS Tip: #1 - has()

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>
Enter fullscreen mode Exit fullscreen mode

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. */
}
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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. */
}
Enter fullscreen mode Exit fullscreen mode

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. */
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

You guessed it

The most popular item in our shop is the stickers. Grab a pack today (with free shipping)!