CSS :invalid & :valid pseudo selector

The :invalid selector allows you to select input elements that do not contain valid content, as determined by its type attribute. :invalid can be "chained" with other pseudo-selectors: like :focus to only validate when the user is typing, :before or :after to generate icons or text to provide more user feedback.

The :valid selector allows you to select input elements that contain valid content, as determined by its type attribute.

This selector has one particular use: providing a user with feedback while they are interacting with a form on the page.