:touch CSS pseudo-class or something similar?

html

responsive-design

css

javascript

byAlex Kataev·Jan 21, 2025

No :touch in CSS, but convo of JavaScript and CSS can pull it off. Here's the mix:

/* JavaScript goes incognito as a bouncer at the club! */
document.addEventListener('touchstart', function(event) {
    if(event.target.matches('.slick-element')) { // "Slick like greased lightning!"
        event.target.classList.add('feeling-touchy');
    }
});
document.addEventListener('touchend', function(event) {
    if(event.target.matches('.slick-element')) { // "Busted moves, DJ JavaScript in the house!"
        event.target.classList.remove('feeling-touchy');
    }
});

/* CSS playing DJ, spinning tracks for the party! */
.slick-element.feeling-touchy {
    /* That's right, we're glowing, Baby! */
    background-color: #00f; /* Funky Fresh Blue */
    color: #fff; /* Smooth Vanilla */
}

This code snippet gives you that instant visual feedback like instant coffee (but it tastes way better 😉)

Understanding selectors with an empathetic touch

Having a clear understanding of interactive pseudo-classes such as :hover, :focus, :active is key. They can evoke different changes based on the user's interactions with the elements—makes you feel like a magician, doesn't it?

Proper sequencing: The cha-cha-cha of pseudo-classes

Declaring your pseudo-classes in the correct order is an art. It's like following the rhythm in a dance — toes first, then heels:

.dance-step:hover {
    /* Waltz across the floor! */
}

.dance-step:active {
    /* Hop, skip and jump! */
}

.dance-step:focus {
    /* Focus, it's a tango! */
}

The :hover keeps it classy by letting :active take the spotlight when an element is both hovered and activated. It's all in the dance moves!

The DJ's guide to touch interaction design

Grace in motion: Keep your transitions smoother than a DJ's cross-fade for a stellar UX.
Catching the spotlight: -webkit-tap-highlight-color lets you control the tap feedback color on iOS. It's like controlling the disco lights!
Lead with :hover: Always define :hover before :active to handle common interactive states like a pro.
Harmony across browsers: Harmonise your designs across the browser orchestra with feature detection and progressive enhancement.

Break out of the box with media queries

A dedicated :touch pseudo-class might be MIA in CSS, but media queries can step in as a VIP guest.

@media (hover: none), (pointer: coarse) {
    .slick-element {
        /* Touch-specific styles, smoooov.... */
    }
}

@media (hover: hover) and (pointer: fine) {
    .slick-element {
        /* Back to the classics for non-touch styles */
    }
}

This approach helps you cater to the touchscreen crowd while keeping it fab for more traditional interface situations.

Partner up with JavaScript for the dancing finish

When the CSS party is in full swing, JavaScript can cut in with some jaw-dropping moves:

Dancing patterns: JavaScript can help you detect complex touch gestures and respond in style.
Dynamic rhythm: JavaScript is the rhythm that dynamically changes the beat by adding and removing CSS classes on-the-fly.
Device-wise DJ-ing: You can adjust the party ambiance for specific groups—devices in our case, with the help of JavaScript.