47 CSS :has() Examples

An interactive, “living” grid that smoothly morphs and adapts layout upon adding/removing items or resizing the container, maintaining a harmonious bento-style structure.

Upon hovering over the soda can, it “comes alive” (changing angle/label), while the foreground rocks slide apart, creating a dynamic 3D depth effect entirely via CSS.

A bold, responsive input field that pops out upon activation; valid email entry triggers a bright green arrow button sliding in, which playfully animates on hover.

An elegant search bar that “levitates” upon focus, with a search button that dynamically expands to reveal text only when there is a query to submit.

A minimalist dimmer slider that increases brightness (white bar width) with each click and resets to off after reaching the maximum level.

A pure CSS expanding gallery powered by the modern :has() selector. Hovering triggers a grid-template-columns transition, widening the active item while revealing content via opacity and transform animations, all styled with blend modes for a tinted monochrome aesthetic.

A fully functional Connect 4 game implemented entirely in CSS, utilizing the :has() selector to manage complex game state, enforce turn-taking via CSS counters, and detect win conditions (vertical, horizontal, diagonal).

A pure CSS isometric text cube constructed via 3D transforms and trigonometry-based SCSS calculations. It features dynamic styling controlled by :has() and CSS variables, allowing for runtime theme switching (tritone/monotone/dim) and dark mode adaptation without JavaScript logic.

An impressive, “living” gallery where the active image smoothly expands, pushing neighbors aside, while inactive elements elegantly dim and desaturate, focusing attention on the content.

An elegant and intuitive menu that helps the user focus on the item of interest by visually dimming the others.

A modern checkout form component utilizing the powerful CSS :has() selector to style parent containers based on the state of nested radio inputs.

A smooth and striking transition between light and dark themes, where the background fills with “blinds” from the center outwards (or vice versa, thanks to symmetric --i indices), while the button playfully rotates.

A futuristic custom select menu leveraging CSS Houdini to animate gradient coordinates and dimensions for a fluid, neon-glow effect.

A navigation menu leveraging CSS Houdini API to animate custom variables for smooth transitions. JavaScript calculates element geometry to drive a dynamic “glowing” background that slides between tabs, while CSS gradients and the :has() selector create a polished, depth-rich visual style.

A pure CSS image gallery that leverages the advanced :has() pseudo-class and radio input hacks to orchestrate state changes without JavaScript. The layout utilizes CSS Grid variables to dynamically translate the viewport, creating a smooth, easing-based transition between full-screen images controlled entirely by sibling combinators and checked states.

A futuristic, interactive blog card featuring AI-generated content fetched dynamically via JavaScript. The layout utilizes advanced CSS techniques like :has() for expandable sections, masking and blend modes for rich graphical elements, and variable-driven cursor tracking animations, creating a dynamic and engaging reading experience.

A high-performance, interactive gallery featuring smooth sliding animations and functional navigation (pagination and arrows), achieved entirely with pure CSS, eliminating the need for script dependencies.

A high-quality, atmospheric Trading Card Game (TCG) interface featuring smooth animations, a tangible sense of depth, and “magical” visual effects upon interaction.

A fully functional rating widget that responds to hover and click events, illuminating the appropriate number of stars and updating the digit on the right, creating a dynamic interface feel without a single line of JS.

A practical example of the new light-dark() CSS function combined with native Web Components to create a flexible theme switcher. The entire system is controlled via data-attributes and includes an additional high-contrast mode for better accessibility.

A comprehensive demonstration of CSS :has() selector and Container Queries capabilities. :has() is used to toggle between light/dark themes and to dynamically filter cards by category without using JavaScript.

An example of powerful reactivity with :has() - theme switching not only changes colors but also radically reworks the layout, adds stylized shadows, and even changes fonts and background SVG patterns.

A multi-faceted demonstration that implements dynamic card filtering in pure CSS using the :has() selector and radio buttons. CSS Subgrid is used for perfect vertical alignment, and :has() is also leveraged for contextual styling - cards with a special element automatically change their appearance without JS.

A Dock menu where the scaling effect on hover is implemented entirely in CSS using :hover and :has() selectors - this allows scaling not only the active element but also its neighbors.

Fully semantic form elements given a modern “button-like” design with an emphasis on accessibility and clean code. It demonstrates flexible style management via CSS Variables and automatic adaptation for users with dark theme preferences.

A ToDo list with a unique feature: automatic sorting of completed tasks to the end of the list, implemented without JavaScript, using the Flexbox order property and the powerful CSS :has() selector.

This component showcases a modern and efficient way to style breadcrumb separators using the powerful CSS :has() selector, allowing precise placement of ::after elements only between active links, thus eliminating the need for JavaScript.

A color scheme switcher demonstrating the power of modern CSS: dynamic theme change (Dark, Light, High-contrast) occurs instantly and exclusively via the native :has() selector, without a single line of JavaScript.

Discover a pure CSS solution for dynamic layout switching between List and Grid views. It leverages the powerful CSS :has() selector to conditionally apply grid-template-columns based on the state of a radio input, all without a single line of JavaScript.

A magnificent theme switch featuring a day-night effect, leveraging advanced CSS capabilities like color-scheme: light-dark and &:has(input:checked) to automatically invert background colors and gradients.

Progressive Blur for the lower screen half is implemented to simulate fog: the effect is created by layering multiple elements with varying backdrop-filter: blur() values, precisely masked using mask: linear-gradient().

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.