How Can I Select an Element Based on Another Element's State Using CSS?

How to Select an Element Based on the State of Another Element in the Page with CSS?

Introduction

CSS does not inherently provide a means to select an element based solely on the state of another element. However, by combining simple selectors, combinators, and the parent relationship between elements, it is possible to achieve limited cross-element targeting in specific scenarios.

Structural Relationships and Simple Selectors

CSS selectors represent the structure and state of elements in a document tree. Simple selectors like type selectors, attribute selectors, and pseudo-classes identify individual elements based on their properties. For example:

div[data-status~="finished"]

Combinators and Relationships

Combinators, such as >, , and ~, define relationships between elements. For instance, > represents a child relationship, denotes an adjacent sibling, and ~ selects all siblings. Thus, we can construct:

section > div[data-status~="finished"]

Limitations of Existing Selectors

Despite having child and sibling combinators, Selectors 3 lacks inverse or grandparent selectors. This makes it impossible to directly select elements based on the state of unrelated elements, like in the example:

<section>
    <div data-status="finished"></div>
    <section>
        <div>

Pseudo-Element Hierarchy and Dynamic Classes

Clever use of pseudo-element hierarchy and dynamic class manipulation can sometimes provide workarounds for cross-element targeting. However, these techniques are limited and require significant code.

Potential Solution in CSS4: :has()

In future iterations of CSS, such as CSS4, the :has() pseudo-class can be used to select elements based on their relationship to specific subtrees. This would provide a way to overcome the current limitations:

section:has(> div[data-status~="finished"]) + section > div.blink

The above is the detailed content of How Can I Select an Element Based on Another Element's State Using CSS?. For more information, please follow other related articles on the PHP Chinese website!