Has (Parent Selector)

Pseudo-class

:has(selector)

Selects elements that contain at least one element matching the argument. The long-awaited parent selector.

Example

.card:has(img) {
  padding: 0;
}
form:has(:invalid) {
  border: 2px solid red;
}

Specificity

Specificity of argument

Browser Support

Chrome 105+, Safari 15.4+, Firefox 121+

About the Has (Parent Selector)

The :has(selector) CSS selector belongs to the Pseudo-class category.Selects elements that contain at least one element matching the argument. The long-awaited parent selector. Understanding CSS selector specificity and combinators is essential for writing maintainable stylesheets that behave predictably.

The specificity of this selector is Specificity of argument. CSS specificity determines which styles are applied when multiple rules target the same element. Higher specificity values take precedence. The specificity hierarchy from lowest to highest is: universal (*) → type/element → class/attribute/pseudo-class → ID → inline styles → !important.

Browser support for Has (Parent Selector) is: Chrome 105+, Safari 15.4+, Firefox 121+. When using newer CSS selectors like :has(), :is(), or CSS nesting, consider providing fallback styles for older browsers. Use @supports to progressively enhance your stylesheets with modern features while maintaining backward compatibility.

Related Selectors

:is(selector):where(selector):not(selector)