How Can I Select Elements Based on Their Child Elements in CSS?

Selecting Elements with Specific Child Elements in CSS

In CSS, how can you select elements based on the presence of a specific child element?

Possible?

Unfortunately, CSS2 and CSS3 do not support parent selection, making it impossible to select an element based on its child elements.

Changes in Specifications

Despite discussions over the years, no consensus has been reached on parent selectors in CSS. Here's an overview of potential changes:

Subject Selectors (Deprecated)

An older draft of "Selectors Level 4 Working Draft" proposed the use of "subject" selectors, but this feature has been abandoned and will not be implemented.

Relational Pseudo-class: :has()

A more recent "Selectors Level 4 Editor’s Draft" includes ":has()" as a relational pseudo-class. This pseudo-class allows authors to select an element based on its contents. For example:

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

This selector would apply the color red to any paragraph (

) element that contains a span ().

Note: These specification changes are subject to revisions, so accuracy of this information may vary.

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