LLM Best Practices

Has Selector

2 min read

View markdown source

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.”

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 container queries and custom properties to build highly context-adaptive components.

Example

/* 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; }
  • specificity - the specificity of :has() derives from its argument.
  • cascade - :has() rules participate in the cascade normally.
  • container-query - complement to :has() for layout-responsive component styling.
  • css-selectors - reference for all selector types and specificity weights.
  • css - the CSS deep-dive.

Citing this term

See Has Selector (llmbestpractices.com/glossary/has-selector).

Graph View

Backlinks