39 CSS :has() Examples
The long-awaited :has() relational selector unlocks powerful parent-based styling in pure CSS. This collection showcases practical and creative uses - like styling containers based on child state, building tabs, highlighting cards with checked inputs, and more - no JavaScript required.
Last updated:
Tailwind Fluid Grid
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.
:has() Pseudo-Class Selector
An elegant and intuitive menu that helps the user focus on the item of interest by visually dimming the others.
Checkout Radios
A modern checkout form component utilizing the powerful CSS :has() selector to style parent containers based on the state of nested radio inputs.
Theme Toggle
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.
Glowing Dropdown
A futuristic custom select menu leveraging CSS Houdini to animate gradient coordinates and dimensions for a fluid, neon-glow effect.
Glowing Tabs
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.
Full Viewport Gallery: Pure CSS
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.
Wall of Text: Blogged
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.
CSS-Only Slider
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.
LapisCordis: A Greco-Roman Mythological Card Game
A high-quality, atmospheric Trading Card Game (TCG) interface featuring smooth animations, a tangible sense of depth, and “magical” visual effects upon interaction.
Star Rating with CSS :has()
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.
Tri-State Theme Toggle with light-dark()
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.
CSS List Filtering with :has()
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.
CSS Style Switcher with :has()
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.
Filter Items in Subgrid with :has()
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.
Mac Dock Magnify Effect with :has
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.
Button-Like Checkboxes and Radios with Accessibility
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.
AutoSort ToDo List (CSS Only)
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.
Breadcrumb Separators with :has()
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.
Color Scheme Switcher with :has()
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.
Layout Switcher with :has()
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.
Light/Dark Theme Switch with CSS Color-Scheme
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.
Reflection with Progressive Blur in CSS
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().
Pure CSS Slideshow
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.
CSS Staircase Hover Effect Using :has()
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.
CSS Var Only Sidebar Toggle
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.
Image Orbit Animation with CSS
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.
Custom Select Menu with Optgroups
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.