CSS :has() Pseudo-Class

Definition and Usage

CSS :has() Pseudo-classes are used to match any parent element that has specific sibling elements or contains specific elements internally.

Using Examples:

• Hide or display elements based on specific sibling elements or internal content.
• Change the layout if there is specific content.
• Make the appearance of a parent element different if it has specific sibling elements or internal content.

Examples

Example 1

Set the style of the <h2> element that follows the <p> element:

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

Try It Yourself

Example 2

Set the style of the <section> element that contains the <h1> element, as well as the style of the <section> element that contains the element with the class name funfact:

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

Try It Yourself

Example 3

Set the style of the <li> element that contains the selected <input> element (within <ul>):

ul li:has(input:checked) {
  border:2px solid maroon;
}

Try It Yourself

CSS Syntax

:has(relative-selector-list) {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version to fully support this pseudo-class.