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
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

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!