---
title: "Has Selector"
slug: "has-selector"
category: "glossary"
tags: ["glossary", "css", "has-selector", "selectors", "cascade", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "The CSS :has() pseudo-class selects an element if its descendants match the argument selector, functioning as a parent selector."
related:
  [
    "[[glossary/specificity]]",
    "[[glossary/cascade]]",
    "[[glossary/container-query]]",
    "[[cheatsheets/css-selectors]]",
    "[[frontend/css]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS selector guidance lives at [[cheatsheets/css-selectors]] and [[frontend/css]]. `:has()` is a relational pseudo-class that selects an element based on its descendants (or, with combinators, other relatives), functioning as the parent selector CSS lacked for years.

## Definition

`:has()` is a CSS relational pseudo-class that selects an element if it contains at least one descendant (or, with combinators, a relative element) that matches the argument selector. It is commonly described as "the parent selector CSS never had."

```css
form:has(input:invalid) { border: 2px solid red; }
li:has(+ li) { border-bottom: 1px solid; }
```

Specificity of `:has()` equals the specificity of its most specific argument. `:has(.active)` has specificity `(0,1,0)`; `:has(#main)` has specificity `(1,0,0)`.

`:has()` accepts a forgiving selector list, meaning invalid arguments are silently dropped rather than invalidating the whole rule. It cannot be nested inside another `:has()`.

Browser support: baseline 2023 (Chrome 105, Firefox 121, Safari 15.4). Do not use in CSS that must support older Firefox without a feature query (`@supports selector(:has(a))`).

## When it applies

Use `:has()` to apply conditional styles to parent or sibling elements based on child state, replacing JavaScript that was previously needed for patterns like "highlight a field group when a child input is focused" or "show a close button only when a modal has content." Combine with [[glossary/container-query|container queries]] and [[glossary/custom-property|custom properties]] to build highly context-adaptive components.

## Example

```css
/* Highlight the label when its sibling input is focused */
.field:has(input:focus) label {
  color: var(--color-active);
  font-weight: 600;
}

/* Hide empty cards */
.card:not(:has(*)) { display: none; }
```

## Related concepts

- [[glossary/specificity]] - the specificity of `:has()` derives from its argument.
- [[glossary/cascade]] - `:has()` rules participate in the cascade normally.
- [[glossary/container-query]] - complement to `:has()` for layout-responsive component styling.
- [[cheatsheets/css-selectors]] - reference for all selector types and specificity weights.
- [[frontend/css]] - the CSS deep-dive.

## Citing this term

> See [[glossary/has-selector|Has Selector]] (llmbestpractices.com/glossary/has-selector).

## Related

- [[glossary/specificity]]
- [[glossary/cascade]]
- [[glossary/container-query]]
- [[cheatsheets/css-selectors]]
- [[frontend/css]]