Category: :focus-within

A CSS Approach to Trap Focus Inside of an Element

I recently read this article by Keith Grant which introduced the newly arrived <dialog>. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal — the most common use of it. While experimenting, I discovered a neat CSS trick on how to tr...

The `:focus-within` Pseudo Class

Nice find by Ian Devlin: The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does. Selecting a parent element based on children is lonnng awaited. The crown jewel of that is :has(). I wonder if that’s getting closer. Direct Link to Article — Permalink...