Friday, May 24, 2024

CSS :has

Date:

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...
spot_imgspot_img

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?

  • 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

spot_img