Thursday, November 30, 2023

CSS :has


Related stories

Courts will provide ‘good guidance’ for crypto — CFTC commissioner

Kristin Johnson of the United States Commodity Futures...

2023 Holiday Gift Guide: Dads

A cozy sweater that comes in three colors,...

Tesla Cybertruck Launch Live: Price, Range, Specs

In 2019, Tesla CEO Elon Musk unveiled a...

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