Thread by @jh3yy

Future CSS Tip! 🔮

Use :has() to power <form> micro-interactions and theme 😎 No JavaScript. Animations powered by <input> state 🚀

.group:has(:invalid) {
animation: shake 0.5s;
}

form:has(.email:valid):has(.password:valid) .submit {
--color: green;
}

Demo link below 👇

Here's that @CodePen link! ✨

🔎 :has is landing in Chrome 105 and is already in Safari as of version 15.4 🙌

Have you tried CSS :has() yet? What could you use it for?

👉 codepen.io/jh3y/pen/yLKMO… via @CodePen

p.s As pointed out you could also do a much simpler

form:valid [type="submit"] { ... }

But, I've been wanting to find examples where I can show chaining :has() 🔗

If you have any cool scenarios for it, I'd love to hear them!

How do the letters twirl?

Each letter is a span inside the label with an inline custom property used for animation delay ✨

<label>
<span style="--index: 1">E</span>
...
</label>

Then use :has 🚀

.group:has(:valid) span {
animation: twirl 1s calc(var(--index) * 0.1s);
}

Did a little revisit to show how you could show and hide error messages with only CSS too ✨

CSS :has is real exciting 😁 Can't wait for this one to land in all the browsers 🤞

How can you keep the <label> accessible whilst splitting the letters? 🤔

Hide the letters from the "Accessibility Tree" and create a new visually hidden <span> that contains the label text 😎

We can use CSS to hide it but without using "display: none" so it's picked up!