Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

:has()

The :has() pseudo-class is a modern relational selector used to style elements based on their children or internal content.

It is often called:

[code theme="dark"] Parent Selector [/code]

because it allows CSS to target parent elements depending on what they contain.


Why :has() is Important

Before:

[code theme="dark"] :has() [/code]

developers usually needed JavaScript for parent-based styling.

Now modern CSS can handle many dynamic UI interactions without JavaScript.


  • Parent-based styling
  • Interactive UI states
  • Dynamic layouts
  • Form validation styling
  • Cleaner frontend architecture

Basic Syntax

[code theme="dark"] selector:has(child-selector){ styles } [/code]

Simple Example

[code theme="dark"] .card:has(img){ border:2px solid #3b82f6; } [/code]

Styles only cards that contain an image.


Live Demo Table

Selector CSS Live Demo
.card:has(img) [code theme="dark"] .card:has(img){ border:2px solid blue; } [/code]
demo Card With Image
Card Without Image
.card:has(input:checked) [code theme="dark"] .card:has(input:checked){ background:#dbeafe; } [/code]
form:has(input:invalid) [code theme="dark"] form:has(input:invalid){ border-color:red; } [/code]
li:has(a.active) [code theme="dark"] li:has(a.active){ font-weight:bold; } [/code]
  • Home
  • About
  • Contact
.grid:has(.featured) [code theme="dark"] .grid:has(.featured){ grid-template-columns:2fr 1fr; } [/code]
Featured Item
Sidebar

:has() vs Traditional CSS

Feature Traditional CSS :has()
Parent Selection Not Possible Supported
JavaScript Dependency Often Required Reduced

Advantages of :has()

  • True parent selector support
  • Cleaner CSS architecture
  • Reduces JavaScript usage
  • Powerful dynamic UI styling
  • Better component logic
  • Modern interactive design support

Disadvantages of :has()

  • Requires modern browser support
  • Complex selectors may affect readability
  • Heavy selectors may affect performance in large DOMs

Cross Browser Compatibility

  • Chrome → Supported
  • Edge → Supported
  • Firefox → Supported in modern versions
  • Safari → Supported
  • Mobile Browsers → Modern support available

Since:

[code theme="dark"] :has() [/code]

is a modern CSS selector, older browsers may not support it fully.


Browser Support Summary

[code theme="dark"] .card:has(img){ border:2px solid blue; } [/code]

The :has() pseudo-class is considered one of the most powerful modern CSS selector features for dynamic UI styling.