Skip to content

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent element from a child selector — but there is so much more that :has() can help us solve. One of those things is re-inventing the clickable card pattern many of us love to use from time to time.

Read more (CSS-Tricks) about Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

Using best practices to create CSS scroll snapping tabs

Accessible scroll snapping tabs visual

Scroll snapping is hip and while we all have styled numerous sorts of tab panes and scroll boxes, I had an idea of combining them. What started out as a simple “scroll snapping experiment” turned out to be an accessibility study.

Read more about Using best practices to create CSS scroll snapping tabs