68 CSS :has() Examples (Page 2)

A unique CSS-only image slider that uses advanced CSS properties like @property and :has() to control image transitions and UI elements. The background-position and nested radio buttons simulate a complex, fragmented image reveal effect without any JavaScript.

This “staircase” hover effect is a prime example of the power of the new CSS :has() selector. It enables elements to react to the state of their siblings, creating a complex and elegant animation without JavaScript.

This animated sidebar is built entirely with pure CSS using modern features. The key is @property for a smooth width transition and the :has() selector to track a checkbox’s state, enabling animation control without a single line of JavaScript.

This carousel effect demonstrates a modern approach to CSS animations, using the offset-path property for circular motion. The complex scaling and highlighting effects on hover are achieved purely with CSS transitions and the :has() selector, eliminating the need for JavaScript.

This custom select menu is a showcase of cutting-edge CSS, built on a robust stylesheet architecture using Cascade Layers. It leverages the experimental appearance: base-select property to deeply customize the native picker UI via the ::picker(select) pseudo-element. This enables advanced, JS-free interactions, using :has(select:open) to manage page overflow and @starting-style to create a smooth, declarative slide-up entry animation.

A fully playable first-person 3D horror game inspired by “The Backrooms”, built almost entirely with CSS.

A dynamic hover effect in pure CSS, where the :has() pseudo-class triggers simultaneous animations: a slide-out tooltip and a smooth icon fill. The tooltip’s content is sourced from a data-tooltip attribute via attr(), and the fill color is flexibly configured with a --bg CSS Custom Property.

A responsive mosaic grid of user avatars utilizing CSS Grid’s dense auto-flow algorithm to seamlessly pack items of varying sizes. Special ‘gold’ supporters span multiple rows and columns, creating visual hierarchy, while :has() pseudo-class selectors enable a focused hover state that subtly dims non-active elements.

A flexible and customizable sidebar built with CSS Custom Properties - sizes, spacing, and colors are easily configurable. The complex choreography of element appearance is achieved through transition-delay, and tooltip content is sourced from data-* attributes.

A high-performance table with smooth UX that reacts instantly to cursor movement and theme changes, leveraging native browser capabilities instead of heavy JS calculations.

A sophisticated CSS-only character selector and sprite animator inspired by Minecraft. It leverages CSS Houdini and advanced math functions to drive complex frame-by-frame sprite animations, while :has() selectors manage state changes for character selection, direction toggling, and dynamic FPS adjustment, complete with real-time stats via CSS counters.

Efficient layout using CSS Grid to stack cards on top of each other, with dynamic layer control via z-index and the :has() selector to determine the position of the next element; the image animation includes movement and straightening of the rotation upon selection.

An interactive radial carousel in pure CSS, where element positioning in a circle is calculated via calc(). State management is handled without JS using the “radio button hack” and the :has() pseudo-class, which triggers rotation animations and sequential content appearance.

A dynamic card carousel/stack technically driven entirely by CSS custom properties and the :has() selector; interactivity is achieved via the “Radio Button Hack” (hidden input[type="radio"]), where selecting one card recalculates variables for all others, creating a smooth 3D transformation effect and dynamic stacking order; a decorative dotted background and a responsive grid layout complement the functionality.

A customized Bootstrap 5 accordion that visually elevates the active panel using the modern :has() pseudo-class. By detecting the .accordion-button:not(.collapsed) state, it applies a bold border and hard shadow to the parent container, creating a distinct “pop-out” focus effect.