The :has() Selector

Finally, a parent selector in CSS! Style elements based on what they contain. It's like magic, but better — it's native CSS.

Chrome 105+Firefox 121+Safari 15.4+Edge 105+

What is :has()?

The :has() pseudo-class lets you select an element if it contains another element that matches a selector. Think of it as “select a parent that has a specific child” — something we've been dreaming about for years!

Old Way vs New Way

No more JavaScript hacks — :has() replaces class-toggling patterns with pure CSS.

The Old Way

// JavaScript required!
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
    if (card.querySelector('.badge')) {
        card.classList.add('has-badge');
    }
});

The New Way

/* Pure CSS! */
.card:has(.badge) {
    border: 2px solid gold;
    background: linear-gradient(
        to right,
        rgba(255, 215, 0, 0.1),
        transparent
    );
}

css

Interactive Examples

These demos use real :has() selectors in CSS — no JavaScript involved. Interact with the elements to see the selectors in action.

Form Validation Styling

The :has() selector detects input validity states and styles the parent field accordingly.

css

Card with Badge

Cards automatically gain special styling when they contain a badge element — no extra classes needed.

NEW

Premium CSS Course

Master modern CSS with this brilliant course

CSS Basics

Start your journey with the fundamentals

SALE

Advanced Techniques

Take your skills to the next level

css

Navigation with Dropdown

Items with dropdown submenus automatically get a dropdown arrow indicator and hover behaviour.

css

Image Gallery with Captions

Figures with captions get enhanced styling, while those without fade on hover — all through :has().

Sunrise over London

Perfect cup of tea

css

Article with Media

Articles automatically switch to a grid layout when they contain images or video — and get colour-coded borders.

CSS Grid: The Complete Guide

Everything you need to know about CSS Grid in one comprehensive guide.

Flexbox in 5 Minutes

Quick video tutorial on mastering Flexbox layouts.

Creating Art with Pure CSS

Discover how to create stunning visuals using only CSS.

css

Advanced Patterns

Combine :has() with other selectors for powerful patterns that would have required JavaScript before.

Sibling Combinations

Use :has() with adjacent and general sibling combinators for context-aware styling.

Sibling-aware selectors reduce layout hacks

css

Quantity Queries

Change layouts based on how many children an element has — responsive to content, not viewport.

Content-driven responsive design

css

State-based Styling

Style ancestors based on the state of deeply nested interactive elements.

Ancestor styling from descendant state

css

Browser Support & Fallbacks

The :has() selector enjoys broad support across modern browsers. Always provide base styles for graceful degradation.

Compatibility Table

Current browser support for the :has() pseudo-class.

BrowserVersionStatus

Chrome / Edge105+✓ Fully Supported

Firefox121+✓ Fully Supported

Safari15.4+✓ Fully Supported

Mobile BrowsersLatest✓ Widely Supported

css

Pro Tips

Keep these guidelines in mind when using :has() in production.

Best Practices

Performance

Keep :has() selectors simple. Complex selectors can impact performance, especially with many elements.

Specificity

:has() doesn't increase specificity by itself — it's the selectors inside that count.

Testing

Always test in browsers that don't support :has() to ensure graceful degradation.

Search pages