Can CSS Select Parents Based on Their Child Elements?

CSS Selector for Elements with a Specific Child

This question explores the possibility of selecting elements based on the presence of a specific child element.

Current CSS Limitations:

As of the current CSS specifications (CSS2 and CSS3), there is no built-in capability to perform parent selection. This means that you cannot directly select an element if it contains a specific child element.

Past Efforts and Proposals:

Older drafts of CSS specifications included the concept of selector subjects, which would have allowed for the selection of a parent element based on its child. However, this feature has been removed and is not present in current CSS implementations.

Emerging Features:

More recent drafts of CSS specifications, such as the Selectors Level 4 Editor's Draft, introduce the concept of the ":has()" relational pseudo-class. ":has()" provides a means to select an element based on its contents.

Selecting Elements with Child Elements Using ":has()":

To select the parent element that contains a specific child element using ":has()":

parent-element:has(child-element) {
  /* styling goes here */
}

Example:

To select all

elements that contain a child:

div:has(span) {
  /* styling goes here */
}

Note that ":has()" is still under development and not fully supported by all browsers.

The above is the detailed content of Can CSS Select Parents Based on Their Child Elements?. For more information, please follow other related articles on the PHP Chinese website!