What is valid selector in css?

How to use valid selector or invalid selector in css?

Valid selector and invalid selector both is work with the form elements. It's presented that any form element as email, numbers, min or max attributes are valid or not both elements are the work for the validation according to the setting of the form elements. as the given example below:

<style>

input:valid {

  border: 1px solid green;

}

input:invalid {

  border: 1px solid red;

}

</style>

:valid selector

<input type="email" value="xyz@ggg.com">

<input type="number" value="65433325">

:invalid selector

<input type="email" value="xyz.com">

<input type="number" value="eee" required>

You will see result as below screenshot: