[csswg-drafts] Parent/Ancestor State Selectors for CSS (Upward and Cross-Branch Traversal) (#12878)

nzpropertytax has just created a new issue for https://github.com/w3c/csswg-drafts:

== Parent/Ancestor State Selectors for CSS (Upward and Cross-Branch Traversal) ==
CSS selectors currently allow styling elements based on their descendants, following siblings, or their own state. However, there is no way to style an element based on the state of a child, descendant, or sibling that is not a direct ancestor or preceding sibling. This limitation makes it impossible to declaratively express UI logic such as:
• "If a checkbox inside a component is checked, show/hide or style another child element elsewhere in the same component."
• "If a form field is valid, style a summary element at the top of the form."

Example Use Case:
Suppose I have a structure like this

<div class="list-dropdown">
  <label>
    <select>
      <option data-active="True">Active</option>
      <option data-active="False">Inactive</option>
    </select>
  </label>
  <label>
    <input type="checkbox" class="list-dropdown-inactive-checkbox">
    Include Inactive
  </label>
</div>

I want to show/hide the <option data-active="False"> based on whether the checkbox is checked, but CSS cannot currently select "up" to the parent and "down" another branch.
Desired Syntax:
A selector like this would solve the problem:
.list-dropdown:has(.list-dropdown-inactive-checkbox:checked) select option[data-active="False"] {
  display: inline-block;
}

Benefits:
• Enables more expressive, declarative UI logic in CSS.
• Reduces reliance on JavaScript for simple state-based styling.
• Makes CSS more powerful for component-based design.
Related Features:
• The :has() pseudo-class is a step forward, but does not allow full upward and cross-branch traversal.
• Parent/ancestor selectors have been a long-standing request in the CSS community.

Request:
Please consider adding support for parent/ancestor state selectors in CSS, allowing styling based on the state of any element within a component, not just descendants or following siblings.



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12878 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 29 September 2025 22:22:53 UTC