40 lines
899 B
HTML
40 lines
899 B
HTML
<!doctype html>
|
|
<title>https://wh.at</title>
|
|
|
|
<style>
|
|
#cat-cat-cat-cat-nya {
|
|
/*
|
|
relative/absolute creates a new "coordinate space" that children
|
|
"absolutes" will be based on.
|
|
*/
|
|
position: relative;
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
&:has(> .l1:checked + .l2:checked + .l3:checked + .l4:checked) .hidden {
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<header>
|
|
<p>
|
|
this site does not work with js
|
|
<noscript>(no... really.)</noscript>
|
|
its also an accessibility nightmare.
|
|
</p>
|
|
</header>
|
|
|
|
<section id="cat-cat-cat-cat-nya">
|
|
<p>this is a simple latching selector. check the boxes.</p>
|
|
|
|
|
|
<input type="checkbox" class="latch l1">cat</input>
|
|
<input type="checkbox" class="latch l2">cat</input>
|
|
<input type="checkbox" class="latch l3">cat</input>
|
|
<input type="checkbox" class="latch l4">cat</input>
|
|
<p class="hidden">nya!</p>
|
|
|
|
</section>
|