In frontend development, we often encounter these requirements:

• Parent element styles depending on child element states — Such as navigation bars where parent <li> needs to highlight based on whether child <a> has .active.
• Layout changes with content — For example, CSS Grid containers switching column numbers when child elements exceed a threshold.
• Interaction-driven parent styles — During form validation, parent <form> changes state based on the validity of internal <input> elements.

Previously, these scenarios could only rely on JavaScript: traversing the DOM to query child elements, then manually adding classes to parent elements. This not only increased code volume but also scattered logic between CSS and JS, reducing maintainability.