<div class="wrapper">
<div class="alert">
<p>Your browser doesn't support CSS :has. Please view it in Safari 15.4 or the latest Chrome Canary.</p>
</div>
</div>
<div style="margin-bottom: 1.5rem;">
<label for="">Select theme</label>
<select name="" id="themeSwitcher">
<option value="default">Default</option>
<option value="blueish">blueish</option>
</select>
</div>
<header>
<a class="logo" href="#">Logo</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Profile</a></li>
</ul>
</header>
<div class="prose">
<h1 style="font-size: 2rem; font-weight: bold;">This is a basic title just for the sake of testing</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit ducimus cu!</p>
<h2>Sub title in there</h2>
<p>CSS :has is cool, isn't it?</p>
</div>
:root {
--color-1: #74559c;
--color-2: #f9f6fe;
}
html:has(option[value="default"]:checked) {
--color-1: #74559c;
--color-2: #f9f6fe;
}
html:has(option[value="blueish"]:checked) {
--color-1: #466ec0;
--color-2: #ebf0f7;
}
h1 {
color: var(--color-1);
margin-bottom: 2rem;
}
body {
border-top: solid 10px var(--color-1);
background-color: var(--color-2);
min-height: 100vh;
}
.prose {
> * + * {
margin-top: 1rem;
}
h2 {
font-weight: bold;
font-size: 1.5rem;
color: var(--color-1);
}
}
header {
display: flex;
justify-content: space-between;
background-color: var(--color-1);
padding: 1rem;
margin-bottom: 2rem;
margin-left: -1rem;
margin-right: -1rem;
a {
color: #fff;
text-decoration: none;
}
.logo {
font-weight: bold;
font-size: 1rem;
}
ul {
display: flex;
gap: 1rem;
}
}
/* Other styles */
.alert {
display: block;
padding: 1rem;
text-align: center;
margin-bottom: 1rem;
background-color: #ffeeee;
border: 1px solid red;
border-radius: 5px;
font-size: 0.75rem;
}
@supports selector(:has(*)) {
.alert {
display: none;
}
}
body {
font-family: "system-ui";
padding: 1rem;
}
.eg {
> * + * {
margin-top: 2rem;
}
}
.wrapper {
max-width: 700px;
margin: 2rem auto;
}
img {
max-width: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.