[csswg-drafts] [css-selectors-4] :valid-within / :invalid-within Pseudo-Classes

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

== [css-selectors-4] :valid-within / :invalid-within Pseudo-Classes ==
[Selectors Level 4](https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo)

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.

![invalid-within](https://user-images.githubusercontent.com/5215554/44926089-f4561200-ad15-11e8-86d3-6c4057ec1604.png)


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

Received on Friday, 31 August 2018 17:15:36 UTC