Presets

Parent Selector

:has() Conditions

1

Styles to Apply

Visual Preview

.container
.active
.container
(no matching child)
With matching childWithout matching child

Selector Breakdown

.containerParent selector
:has(...)Has child matching
> .activeHas Child

Generated CSS

/* CSS :has() Selector - Parent Selector Pattern */
.container:has(> .active) {
  background-color: #e0f7fa;
  border-color: #00bcd4;
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
  .container.has-condition {
  background-color: #e0f7fa;
  border-color: #00bcd4;
  }
}

HTML Example

<div class="container">
  <p>Parent element</p>
    <div class="active">Child element 1</div>
</div>

<!-- Without condition for comparison -->
<div class="container">
  <p>Parent element (no matching children)</p>
</div>

CSS :has() Reference

Basic Syntax

:has(selector) {
  /* styles */
}

/* Example: Style parent with active child */
.container:has(.active) {
  background: #e0f7fa;
}

Common Patterns

/* Form validation styling */
.field:has(:invalid) { ... }

/* Card with image */
.card:has(img) { ... }

/* Checkbox styling */
label:has(:checked) { ... }

/* Empty state */
.list:not(:has(li)) { ... }

Combinators in :has()

/* Direct child */
:has(> .child) { ... }

/* Adjacent sibling */
:has(+ .sibling) { ... }

/* General sibling */
:has(~ .sibling) { ... }

/* Multiple conditions */
:has(.a):has(.b) { ... }

Browser Support

  • Chrome 105+ (Aug 2022)
  • Safari 15.4+ (Mar 2022)
  • Firefox 121+ (Dec 2023)
  • Edge 105+ (Aug 2022)

Use @supports not (selector(:has(*))) for fallbacks

Rate this tool