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

The CSS :has() pseudo class is rolling out in lots of browsers with Chrome and Safari already totally supporting it. It’s usually referred to it as “the mum or dad selector” — as in, we will choose type a mum or dad aspect from a toddler selector — however there may be a lot extra that :has() may also help us clear up. A kind of issues is re-inventing the clickable card sample many people love to make use of sometimes.

We’ll check out how :has() may also help us deal with linked playing cards, however first…

What is that this :has() pseudo class?

There may be already a bunch of nice posts floating round that do a superb job explaining what :has() is and what it’s used for, however it’s nonetheless new sufficient that we must say a number of phrases about it right here as nicely.

:has() is a relational pseudo class that’s a part of the W3C Selectors Stage 4 working draft. That’s what the parentheses are all about: matching parts which might be associated to — or, extra precisely, include — sure little one parts.

/* Matches an article aspect that comprises a picture aspect */
article:has(img) { }

/* Matches an article aspect with a picture contained instantly inside it */
article:has(> img) { }

So, you may see why we would wish to name it a “mum or dad” selector. However we will additionally mix it with different purposeful pseudo lessons to get extra particular. Say we wish to type articles that do not include any pictures. We will mix the relational powers of :has() with the negation powers of :not() to try this:

/* Matches an article with out pictures */
article:has(:not(img)) { }

However that’s simply the beginning of how we will mix powers to do extra with :has(). Earlier than we flip particularly to fixing the clickable card conundrum, let’s have a look at a number of methods we at the moment strategy them with out utilizing :has().

How we at the moment deal with clickable playing cards

There are three major approaches on how folks create a completely clickable card nowadays and to completely perceive the facility of this pseudo class, it’s good to have a little bit of a round-up.

The “Hyperlink as a Wrapper” strategy

This strategy is one thing used fairly ceaselessly. I by no means use this strategy however I created a fast demo to show it:

There are lots of issues right here, particularly with regards to accessibility. When customers navigate your web site utilizing the rotor perform, they’ll hear the total textual content within that <a> aspect — the heading, the textual content, and the hyperlink. Somebody may not wish to sit by means of all that. We will do higher. Since HTML5, we will nest block parts within an <a> aspect. But it surely by no means feels proper to me, particularly for that reason.

Professionals:

Fast to implementSemantically appropriate

Cons:

Accessibility concernsText not selectableA lot of problem to overwrite types that you just used in your default hyperlinks

The JavaScript technique

Utilizing JavaScript, we will connect a hyperlink to our card as an alternative of writing it within the markup. I discovered this nice CodePen demo by costdev who additionally made the cardboard textual content selectable within the course of:

This strategy has lots of advantages. Our hyperlinks are accessible on focus and we will even choose textual content. However there are some drawbacks with regards to styling. If we wish to animate these playing cards, for instance, we must add :hover types on our major .card wrapper as an alternative of the hyperlink itself. We additionally wouldn’t profit from the animations when the hyperlinks are in focus from keyboard tabbing.

Professionals:

May be made completely accessibleAbility to pick out textual content

Cons:

Requires JavaScriptRight clicking not doable (though might be mounted with some further scripting)Would require lots of styling on the cardboard itself which might not work when focussing the hyperlink

The ::after selector strategy

This technique requires us to set the cardboard with relative positioning, then set absolute positioning on the hyperlink’s ::after pseudo selector of a hyperlink. This doesn’t require any JavaScript and is fairly straightforward to implement:

There are a number of drawbacks right here, particularly with regards to deciding on textual content. Except you present a better z-index in your card-body, you gained’t be capable to choose textual content however if you happen to do, be warned that clicking the textual content is not going to activate your hyperlink. Whether or not or not you need selectable textual content is as much as you. I feel it may be a UX problem, however it is dependent upon the use-case. The textual content continues to be accessible to display screen readers however my major drawback with the tactic is the shortage of animation prospects.

Professionals:

Simple to implementAccessible hyperlink with out bloated textWorks on hover and focus

Cons:

Textual content is just not selectableYou can solely animate the hyperlink as that is the aspect you’re hovering.

A brand new strategy: Utilizing ::after with :has()

Now that we’ve established the present approaches for clickable playing cards, I wish to present how introducing :has() to the combo solves most of these shortcomings.

In truth, let’s base this strategy on the final one we checked out utilizing ::after on the hyperlink aspect. We will truly use :has() there to beat that strategy’s animation constraints.

Let’s begin with the markup:

<div class=”card”>
<img src=”cat.webp” alt=”Fluffy grey and white tabby kitten snuggled up in a ball.” />
<div clas=”article-body”>
<h2>Some Heading</h2>
<p>Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.</p>
</div>
</div>

I shall be preserving issues so simple as doable by concentrating on parts within the CSS as an alternative of lessons.

For this demo, we’re going so as to add a picture zoom and shadow to the cardboard on hover, and animate the hyperlink with an arrow popping up and whereas altering the hyperlink’s textual content colour. To make this straightforward, we’re going so as to add some customized properties scoped on our card. Right here’s the essential styling:

/* The cardboard aspect */
article {
–img-scale: 1.001;
–title-color: black;
–link-icon-translate: -20px;
–link-icon-opacity: 0;

place: relative;
border-radius: 16px;
box-shadow: none;
background: #fff;
transform-origin: middle;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
/* The hyperlink’s ::after pseudo */
article a::after {
content material: “”;
place: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
}

Nice! We added an preliminary scale for the picture (–img-scale: 1.001), the preliminary colour of the cardboard heading (–title-color: black) and a few further properties we’ll use to make our arrow come out of the hyperlink. We’ve additionally set an empty state of the box-shadow declaration with a view to animate it later . This units up what we want for the clickable card proper now, so let’s add some resets and styling to it by including these customized properties to the weather we wish to animate:

article h2 {
margin: 0 0 18px 0;
font-family: “Bebas Neue”, cursive;
font-size: 1.9rem;
letter-spacing: 0.06em;
colour: var(–title-color);
transition: colour 0.3s ease-out;
}
article determine {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
article img {
max-width: 100%;
transform-origin: middle;
remodel: scale(var(–img-scale));
transition: remodel 0.4s ease-in-out;
}
article a {
show: inline-flex;
align-items: middle;
text-decoration: none;
colour: #28666e;
}
article a:focus {
define: 1px dotted #28666e;
}
article a .icon {
min-width: 24px;
width: 24px;
top: 24px;
margin-left: 5px;
remodel: translateX(var(–link-icon-translate));
opacity: var(–link-icon-opacity);
transition: all 0.3s;
}

.article-body {
padding: 24px;
}

Let’s be sort to folks and likewise add a display screen reader class hidden behind the hyperlink:

.sr-only:not(:focus):not(:lively) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
top: 1px;
overflow: hidden;
place: absolute;
white-space: nowrap;
width: 1px;
}

Our card is beginning to look fairly candy. It’s time so as to add a little bit of magic to it. With the :has() pseudo class, we will now test if our hyperlink is hovered or centered, then replace our customized properties and add a box-shadow. With this little chunk of CSS our card actually involves life:

/* Matches an article aspect that comprises a hover or focus state */
article:has(:hover, :focus) {
–img-scale: 1.1;
–title-color: #28666e;
–link-icon-translate: 0;
–link-icon-opacity: 1;

box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

See what’s up there? Now we get the up to date types if any little one aspect within the card is hovered or centered. And despite the fact that the hyperlink aspect is the one factor that may include a hover or focus state within the ::after clickable card strategy, we will use that to match the mum or dad aspect and apply the transitions.

And there you’ve gotten it. Simply one other highly effective use case for the :has() selector. Not solely can we match a mum or dad aspect by declaring different parts as arguments, however we will match additionally use pseudos to match and magnificence mother and father as nicely.

Professionals:

AccessibleAnimatableNo JavaScript neededUses :hover on the right aspect

Cons:

Textual content is just not simply selectable.Browser help is proscribed to Chrome and Safari (it’s supported in Firefox behind a flag).

Here’s a demo utilizing this method. You may discover an additional wrapper across the card, however that’s simply me enjoying round with container queries, which is simply a type of different incredible issues rolling out in all main browsers.

Obtained some different examples you want to share? Different options or concepts are greater than welcome within the remark part.

Creating Animated, Clickable Playing cards With the :has() Relational Pseudo Class initially printed on CSS-Methods, which is a part of the DigitalOcean household. You need to get the publication.