<h1 class="supported">Your browser supports :has()</h1>
<h1 class="unsupported">Your browser does not support :has()</h1>
* {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'Google Sans', sans-serif, system-ui;
}
.supported {
display: none;
color: hsl(130 80% 40%);
}
.unsupported {
color: hsl(0 80% 50%);
}
@supports(selector(:has(+ *))) {
.supported { display: block; }
.unsupported {
display: none;
}
}