--- title: ":has() is here and you probably need it in your CSS" url: "https://www.bekk.christmas/post/2022/08/has-is-here-and-you-probably-need-it-in-your-css" authors: ["Magnus Rand"] published: "2022-12-08" updated: "2024-11-07T13:05:29Z" language: "en-US" type: "article" tags: ["CSS"] keywords: ["parent selector", "pseudo class", "new css features", "style based on sibling", "has", "new css selectors", "style based on children"] --- # :has() is here and you probably need it in your CSS So, you've heard talk of a so-called `:has()` selector, but don't really know what it is. Or maybe you just clicked the article hoping to learn something new. Well, this article is for you! Now that `:has()` is supported by almost all major browsers ([except Firefox](https://caniuse.com/css-has) where you need a feature flag …), it is time to learn what it is, why you should care and how you use it. ## In short The :has() pseudo-class lets you style an element based on whether it contains other elements or matches certain related selectors, which makes parent-style and sibling-aware CSS patterns possible. You can use it to change a container when it has a caption, or adjust spacing between adjacent headings. - **For:** Frontend developers who write CSS - **Good to know beforehand:** Basic knowledge of CSS selectors and pseudo-classes _AI-generated_ ## What is it and why should I care? `:has()` is a so-called _pseudo-class_—this makes it different from normal selection in CSS. Take a look at the example in figure 1. A pseudo-class works by styling the anchor (the thing before the colon) when the state behind the colon (the pseudo-class) is true. In figure 1, this means styling the div when it is hovered. ![Image showing the folowing code: div:hovered, where it is explained that what precedes the colon, here the div, is called an anchor, while what follows the colon is called the pseudo-class, here hover](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/a0660b7194c001bb2c1988ebe7c57e8d562932de-648x323.png) _Figure 1–pseudo-class example_ The same is true for `:has()`, it styles the element before `:` when the `has()` part is true. But when _is_ `has()` true? When the [_relative selectors_](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#structure_of_a_selector)* in the parentheses are found**. This lets us style our anchor (e.g. the div in figure 1) based on other relative elements—like children. _* e.g. In_ _`div span`__, span is a relative selector to div ** pseudo-elements and_ _`:has()`_ _inside_ _`:has()`_ _is not supported_ ```css /* styles div when it has a span child */ div:has(span) {...} ``` “I don’t need a new pseudo-class for relative selection”, you might say, “`div:hover p` for example lets me style my paragraph element when my parent div is hovered.” This is true, but what if you want to style your parent div when the _paragraph_ is hovered? `div p:hover` would just style your paragraph, not your div. With `:has()`, however, this is now possible! `div:has(p:hover)` will style the div element when it contains a p element being hovered! Let’s look at a few simple examples: ## A parent selector The most obvious use for `:has()` is as a parent selector. In the following example (see embedded CodeSandbox below) we have an `.image-container` div. This div contains an image and a `.caption` paragraph. The goal is to style our image-container background when it has a caption. ```html

This person does, unfortunately, not exist

``` Without using `:has()` we might try the following: ```css /* See result in CodePen example 1 below "Without :has()" */ .image-container .caption { background-color: lightblue; } ``` This has the right idea, we check when an `.image-container` has a `.caption` within it and apply a background colour. Unfortunately, the background colour is applied to the `.caption`, not the `.image-container`. Let’s try with `:has()`: ```css /* See result in CodePen example 1 below "With :has()" */ .image-container:has(.caption) { background-color: lightblue; } ``` Now the style is applied to the `.image-container` instead of the `.caption`—just as we wanted! The styling is also removed when no `.caption` is present! [CodeSandbox](https://codesandbox.io/embed/has-example-9xflct?fontsize=14&hidenavigation=1&module=%2Fstyles.css&theme=light) ## More than a parent selector! Another usage for `:has()` is to style your element based on a sibling traits. A good usage for this is to change the spacing between adjacent headings. ```html

This heading is good

This heading is gooder

This heading is the goodest

Here be some fancy text

``` With `:has()` we can remove this space for all adjacent headings like this: ```css :is(h1,h2,h3):has(+ :is(h2,h3,h4)) { margin-bottom: -1rem; } ``` The `:is()` makes it work for all elements inside the parentheses and the `+` targets adjecent elements. The result is that h1, h2 and h3 elements followed by a h2, h3 or h4 element have a margin-bottom of `-1rem`. [CodeSandbox](https://codesandbox.io/embed/frosty-dew-vdsobt?fontsize=14&hidenavigation=1&theme=dark) ## Now use it! And there you go. Now you know the `:has()` selector exist and you know how it works. The only thing left then is to go out and use it—good luck! ## Relevant resources recommended by the author - [Contrast is boring—can't someone else do it?](https://www.bekk.christmas/post/2022/12/contrast-is-boring-can-t-someone-else-do-it): Having sufficient contrast in your website is one of those things which are very important but still very boring to fix—especially if your site uses multiple background colours. Well, be bored no more! color-contrast() is (hopefully soon) here to save us! Let's learn what it - [Let's kill the prototype](https://www.bekk.christmas/post/2022/8/lets-kill-the-prototype): Ragnhild thinks we should put detailed prototypes to rest, and rather get our designs out to the public faster.