Can CSS Select Parent Elements Based on Their Child Elements?

Can CSS Identify Elements Based on Their Child Elements?

In this question, we explore the possibility of using CSS selectors to identify elements that contain specific child elements. For instance, we aim to select all

elements that include children.

Answer:

Unfortunately, CSS2 and CSS3 specifications lack the ability to select parent elements based on their child content. Parent selectors are not currently supported.

Note on Specification Updates:

This information may become outdated due to ongoing discussions and changes in CSS specifications. We will make every effort to keep this answer accurate, but inaccuracies may occur.

Exploring Parent Selectors in CSS Drafts:

An early "Selectors Level 4 Working Draft" introduced the concept of "selector subjects," allowing authors to specify the element that receives styles. However, this feature has been removed from future specifications and will not be available.

The :has() Pseudo-Class in "Selectors Level 4 Editor's Draft":

A more recent "Selectors Level 4 Editor's Draft" includes the :has() relational pseudo-class. This construct allows for element selection based on their content. Using :has(), the example above appears as follows:

p:has(span) {
    color: red;
}

This selector will select all

elements that contain a child.

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