CSS :has() browser support

npm init -y >/dev/null
npm install --silent --no-audit --no-fund @mdn/browser-compat-data >/dev/null 2>&1
node -e '
const bcd = require("@mdn/browser-compat-data");
const support = bcd.css.selectors.has.__compat.support;
for (const b of ["chrome", "edge", "firefox", "safari", "safari_ios", "chrome_android", "samsunginternet_android", "opera"]) {
  const entry = [].concat(support[b])[0];
  console.log(b.padEnd(24), entry.version_added);
}'

.form-row { border-color: #ccc; }

@supports selector(:has(a)) {
  .form-row:has(input:invalid) { border-color: crimson; }
}

/* a card that contains an image gets a different layout */
.card:has(img) { grid-template-columns: 8rem 1fr; }

/* style a label whose following input is invalid */
label:has(+ input:invalid) { color: crimson; }

/* page-level state: lock scroll while a dialog is open */
body:has(dialog[open]) { overflow: hidden; }