CSS :has() Examples

Select elements anywhere on the page if a specific selector exists.

In this example if the hero section is present, hide the logo in the navbar and change the flex box alignment.

body:has(.home-page-hero) nav .logo {
  display: none;
}

body:has(.home-page-hero) .sub-page nav {
  justify-content: flex-end;
}

A Tasty Treats Podcast for Web Developers