Coordinate state with group and peer

Mark the state owner with group:

<a class="group" href="/docs">
  Docs <span class="motion-safe:group-hover:translate-x-1">→</span>
</a>

The descendant’s variant responds to the ancestor’s state. The ancestor remains the real link; group only exposes that existing relationship to descendant styling.

peer lets a later sibling respond to a control:

<label>
  <span>Email</span>
  <input class="peer" type="email" required>
  <span class="hidden text-red-700 peer-invalid:block">
    Enter a valid email address.
  </span>
</label>

Peer selectors rely on CSS sibling relationships, so the styled target must come after the marked peer in the DOM. Do not reorder meaningful content just to satisfy a selector; change the markup boundary or use another state mechanism.

Native state is the best source when available: checked, invalid, disabled, and focus already communicate with the platform. For application state, use attributes such as aria-expanded and style from that attribute so accessibility and appearance share one source of truth.

Nested components can name groups or peers, for example group/card with group-hover/card:*, so an inner group does not accidentally respond to an outer one. Names clarify which state owner controls a variant.

Showing validation text with CSS is not the complete validation experience. Connect the message to the input, choose when validation should appear, and make dynamic updates understandable to assistive technology.

Your action is to build one grouped link and one peer-validated field. Add a nested group, test keyboard focus and invalid submission, and draw the exact ancestor or sibling selector each variant represents.