Friday, May 24, 2024

CSS :has


Related stories

Sports I’ve Considered

Our summer style icon is Tashi Duncan. By...

5 Ways Senior Women Can Be a Blessing to Others

Being a conduit of God’s love to others...

Animal Well And More Made May The Month Of Puzzle Games

At the beginning of this year, I could...

Wait, Since When Does Cher Have a Nose Ring? See Photos

I didn't start getting tattoos until 10 years...

Compass CEO Robert Reffkin Says The Luxury Market Is Back

The luxury market is back. That was Compass...

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
  display: block;

  If a `figure` has a `caption` with a `multiline` class
  allow the `figure` to have any height
  height: 200px;

  height: auto;

  Hide an advert containing `div` until ads load
  and have been injected
  display: none;

  display: block;

  If we have an `article` element without a heading,
  add top padding because `H1`s have top padding
  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?

  • Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and…

  • Display Images as Grayscale with CSS Filters

    CSS filters aren’t yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the…

Source link

Latest stories