How Can I Target CSS Elements Based on the State of Another Element?

How to Selectively Target Elements Based on the State of Another Element with CSS?

In CSS, targeting elements based on the state of another element can be challenging due to limitations in the current selector syntax. To fully understand the situation, we'll explore three critical conditions affecting this capability.

Conditions for Selecting Elements Based on State:

1. Representation of Element States: Can the states of target and reference elements be represented using existing simple selectors?
2. Structural Relationships: Can we establish a structural connection between the elements using combinators?
3. Subject of the Selector: Can the target element be set as the subject of the complex selector?

Limitations in Current Selectors:

The primary limitation lies in the lack of a parent or previous sibling selector. This deficiency makes it impossible to establish relationships like:

• Parent to child: Identifying a child element based on the state of its parent
• Next sibling to later sibling: Selecting a later sibling based on the condition of a previous sibling

Potential Solution with Selectors 4 and :has() Pseudo-Class:

While the current Selectors standard doesn't address this issue, upcoming advancements in Selectors 4 introduce the :has() pseudo-class, which has the potential to alleviate these limitations. :has() allows the selector to look for specific descendant elements within the parent element it is applied to.

For example:

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

This selector identifies any div elements in a subsequent section that have either the ".blink" or ".spin" classes, provided that the previous section contains a div with the "finished" attribute.

Note: The :matches() pseudo-class is currently under development and is not yet supported by all browsers.

As a temporary solution, you can manually implement this logic in Javascript using functions like Document.querySelector() to select elements meeting the conditions.

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