Parent/Ancestor State Selectors for CSS (Upward and Cross-Branch Traversal)

[nzpropertytax]

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 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.