I was setting up a simple landing page for Fandwagon and just wanted some text to be strike-through when the user checks a checkbox. So far my landing page has no need for any JavaScript, and thankfully I can keep it that way and still get conditional styles with the :has()
pseudo-class.
Demo
Code
First, the HTML - a simple form with a checkbox.
<form>
<p>
Want to know when it's ready?
<span
>I'll send you one email when it's ready, then delete your email address
forever.</span
>
</p>
<div>
<input type="checkbox" switch name="subscribe" id="subscribe" />
<label for="subscribe">Check this box to subscribe to updates</label>
</div>
</form>
And the CSS for the conditional strike-through
#example-form:has(input:checked) span {
text-decoration: line-through;
}
Breaking down the selector
The first part #example-form:has(input:checked)
is basically saying "find the element with id of example-form
that has a child input
element that is checked".
:has
is basically a very-flexible "parent selector".
Once we've selected the parent that contains the checked input
then we select the descendent span
element and apply the text-decoration: line-through
style.
๐ฅ Done! No JavaScript needed!
You can get pretty far in conditional styling by combining
:has
and:checked
pseudo-classes. If you have any cool example of combining the two then send me an email, I'd love to see!
Top comments (0)