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;
}

Syntax is a Podcast about Web Development. Started by Wes and Scott in 2017, Syntax has published 741 podcast episodes on full-stack web development, covering JavaScript Server + Client, the latest Frameworks, HTML, CSS, databases, deployment environments, and a whole lot more! You should listen! It's pretty good.