CSS :has

By  on  

For as long as developers have written CSS code, we've been desperate to have a method to allow styling a parent element based child characteristics. That's not been possible until now. CSS has introduced the :has pseudo-class which allows styling a parent based on a relative CSS selector!

Let's have a look at a few use cases for :has in CSS:

/*
  If an `a` element contains an image, set the `a`'s display
*/
a:has(img) {
  display: block;
}

/*
  If a `figure` has a `caption` with a `multiline` class
  allow the `figure` to have any height
*/
figure {
  height: 200px;
}
figure:has(caption.multiline) {
  height: auto;
}

/*
  Hide an advert containing `div` until ads load
  and have been injected
*/
.ad-container {
  display: none;
}
.ad-container:has(.ad) {
  display: block;
}

/*
  If we have an `article` element without a heading,
  add top padding because `H1`s have top padding
*/
article:not(:has(h1)) {
  padding-top: 20px;
}

Apple's Safari is the first browser to support :has , though we should see others quickly follow suit as it's part of the official CSS spec. Now that we have this new pseudo-class, do you think you'll use it much? Or will you stick to your current workarounds?

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

Discussion

  1. saithis

    Very useful new CSS feature, but please be careful with the advert example. It sucks if you are reading something and suddenly the text jumps around because some stupid ad finished loading and moves everything around.

  2. Thank you for this very insightful article.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!