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

Incredible Demos

  • By
    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

  • By
    Shake Things Up Using jQuery UI’s Shake Effect

    Yesterday I created a tutorial showing you how you can shake an element using Fx.Shake, a MooTools component written by Aaron Newton. It turns out that jQuery UI also has a shake effect which can draw attention to an element. The XHTML Exactly the same as...

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!