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

By: Geoff Graham

Geoff Graham — Thu, 27 Oct 2022 21:55:46 +0000

In reply to Brecht De Ruyte. Fixed!

By: Brecht De Ruyte

Brecht De Ruyte — Thu, 27 Oct 2022 15:04:56 +0000

In reply to Recci. Yes indeed :) I notified the editor

By: Brecht De Ruyte

Brecht De Ruyte — Thu, 27 Oct 2022 15:04:28 +0000

In reply to Michael Richins. Good point indeed :)

By: Michael Richins

Michael Richins — Thu, 27 Oct 2022 14:52:03 +0000

Thank you so much for supporting accessibility! This is a very well documented and thought out article. There is just one gotcha that I can see. That is you should probably add aria-hidden="true" to the SVG element inside the link tag. Some browsers will announce there is an image.

By: Brecht De Ruyte

Brecht De Ruyte — Thu, 27 Oct 2022 13:29:05 +0000

Thank you for the feedback. I do find that if you use the .article-wrapper:hover img technique, you always assume it has a link in it, the hover effect will always play even if a link is missing. So that's where the :has() pseudo can really shine (especially if you are more specific with :has(a:hover, a:focus) The link as a wrapper is semantically correct as it allows block elements inside of it (which wasn't the case in previous versions) This is according to the the HTML5 spec :) although not a good practice in this case as you suggested as well.

By: YZG

YZG — Thu, 27 Oct 2022 01:49:46 +0000

Thank you, i wasn’t see anything like this before, definitely will try for next project.

By: Recci

Recci — Wed, 26 Oct 2022 19:51:27 +0000

Hey! Thanks for this article! Your initial markup code block for the :has() solution doesn't contain the actual <a> element while you do refer to it in the text. The later snippet does.

By: Glenn

Glenn — Tue, 25 Oct 2022 22:45:52 +0000

Thanks – it’s always interesting to see uses for :has.

A couple of suggestions:

The con on the “::after selector approach” of “You can only animate the link as this is the element you’re hovering” can be gotten around by using .article-wrapper:hover img. Nothing says you need to actually target the to do your hovering styles.

I also wouldn’t call the “Link as a Wrapper” particularly semantic, given we’re wrapping a stack of content inside a link. The “::after selector approach” and the “:has” approach strike me as the more semantic options.

By: Brecht De Ruyte

Brecht De Ruyte — Tue, 25 Oct 2022 18:29:39 +0000

In reply to Adam Taylor. True that this would do pretty much the same in this case. You would need some extra styles for your cursor for example, but what if one of your cards wouldn't have a link in it? You'd still get the hover effect even though no link is present. With the has pseudo we can check this right away.

By: Adam Taylor

Adam Taylor — Tue, 25 Oct 2022 16:12:19 +0000

For the final example, doesn't this work and let you do the same animation style?

article:hover,
article:focus-within {
    styles...
}

Hovering on a child element will in this case also be a hover on the parent, and focus-within checks for any child element having focus. I agree the new way is cleaner, but it's not only possible with :has