[selectors-4] :valid-within / :invalid-within pseudo-classes

Selectors Level 4

This is a request to add pseudo-class selectors (:valid-within & :invalid-within) that would apply to any element that contains an element which matches the conditions used for the :valid or :invalid pseudo-classes.

The use cases would be very similar to those of the :focus-within pseudo-class. The most obvious case would be if one wanted to style a containing parent element of an input with a different background color, such as in the attached example.

I know that it is already possible to style siblings that follow the input via input:invalid <+/~> <selector> (as long as one can control their source order), however the proposed pseudo-class would have a wider range of uses and not require specific source ordering.

These selectors were mentioned briefly as a comment in #457, pertaining to :target-within. I could not find other discussions of the same.

Start with the Selectors Level 4 section linked in the issue, then read the related discussion in #457. Compare the proposed :valid-within and :invalid-within behavior with :focus-within and the existing :valid/:invalid pseudo-classes, using the attached example as context. Done means the working group has resolved the behavior and specification direction.