Creating Animated, Clickable Playing cards With the :has() Relational Pseudo Class | CSS-Methods

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 dad or mum selector” — as in, we will choose fashion a dad or mum component from a toddler selector — however there’s a lot extra that :has() will help us resolve. A kind of issues is re-inventing the clickable card sample many people love to make use of once in a while.

We’ll check out how :has() will 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 wonderful job explaining what :has() is and what it’s used for, nevertheless it’s nonetheless new sufficient that we must say just a few phrases about it right here as nicely.

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

/* Matches an article component that incorporates a picture component */
article:has(img) { }

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

So, you’ll be able to see why we’d wish to name it a “dad or mum” selector. However we will additionally mix it with different practical pseudo courses to get extra particular. Say we wish to fashion articles that do not include any photos. We are able to mix the relational powers of :has() with the negation powers of :not() to do this:

/* Matches an article with out photos  */
article:not(:has(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 just a few methods we presently strategy them with out utilizing :has().

How we presently deal with clickable playing cards

There are three important approaches on how individuals create a completely clickable card as of late and to totally perceive the ability 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 loads of issues right here, particularly on the subject of accessibility. When customers navigate your web site utilizing the rotor operate, they’ll hear the total textual content within that <a> component — the heading, the textual content, and the hyperlink. Somebody won’t wish to sit by means of all that. We are able to do higher. Since HTML5, we will nest block components within an <a> component. However it by no means feels proper to me, particularly because of this.

Professionals:

• Fast to implement
• Semantically appropriate

Cons:

• Accessibility issues
• Textual content not selectable
• A variety of trouble to overwrite kinds that you simply used in your default hyperlinks

The JavaScript technique

Utilizing JavaScript, we will connect a hyperlink to our card as a substitute 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 loads of advantages. Our hyperlinks are accessible on focus and we will even choose textual content. However there are some drawbacks on the subject of styling. If we wish to animate these playing cards, for instance, we must add :hover kinds on our important .card wrapper as a substitute of the hyperlink itself. We additionally wouldn’t profit from the animations when the hyperlinks are in focus from keyboard tabbing.

Professionals:

• Might be made completely accessible
• Potential to pick out textual content

Cons:

• Requires JavaScript
• Proper clicking not attainable (though could possibly be fastened with some additional scripting)
• Would require loads 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 just a few drawbacks right here, particularly on the subject of choosing textual content. Except you present a better z-index in your card-body, you received’t be capable to choose textual content however should you do, be warned that clicking the textual content won’t 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 situation, nevertheless it is determined by the use-case. The textual content remains to be accessible to display screen readers however my important drawback with the strategy is the dearth of animation potentialities.

Professionals:

• Straightforward to implement
• Accessible hyperlink with out bloated textual content
• Works on hover and focus

Cons:

• Textual content isn’t selectable
• You possibly can solely animate the hyperlink as that is the component you’re hovering.

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

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

Actually, let’s base this strategy on the final one we checked out utilizing ::after on the hyperlink component. We are able to really use :has() there to beat that strategy’s animation constraints.

Let’s begin with the markup:

<div class="card">
  <img src="https://css-tricks.com/creating-animated-clickable-cards-with-the-has-relational-pseudo-class/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 might be preserving issues so simple as attainable by concentrating on components within the CSS as a substitute of courses.

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 component */
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: heart;
  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 additional 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 in an effort 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: heart;
  rework: scale(var(--img-scale));
  transition: rework 0.4s ease-in-out;
}
article a {
  show: inline-flex;
  align-items: heart;
  text-decoration: none;
  colour: #28666e;
}
article a:focus {
  define: 1px dotted #28666e;
}
article a .icon {
  min-width: 24px;
  width: 24px;
  peak: 24px;
  margin-left: 5px;
  rework: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

.article-body {
  padding: 24px;
}

Let’s be type to individuals 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%);
  peak: 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 verify if our hyperlink is hovered or targeted, then replace our customized properties and add a box-shadow. With this little chunk of CSS our card actually involves life:

/* Matches an article component that incorporates 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 kinds if any baby component within the card is hovered or targeted. And although the hyperlink component 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 dad or mum component and apply the transitions.

And there you may have it. Simply one other highly effective use case for the :has() selector. Not solely can we match a dad or mum component by declaring different components as arguments, however we will match additionally use pseudos to match and magnificence dad and mom as nicely.

Professionals:

• Accessible
• Animatable
• No JavaScript wanted
• Makes use of :hover on the proper component

Cons:

• Textual content isn’t simply selectable.
• Browser help is restricted 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 implausible issues rolling out in all main browsers.

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