The :valid pseudo-class in CSS is used to select form elements that have content conforming to the element's defined validation constraints. This includes fields like <input>, <textarea>, and <select> when they satisfy conditions such as required, pattern, min, max, or type restrictions. Essentially, if a form control contains valid data according to its HTML attributes, it will match the :valid pseudo-class.

This pseudo-class is particularly useful for providing immediate visual feedback to users as they fill out forms. For example, a green border might indicate that the input is valid, while an invalid input can be styled differently using the :invalid pseudo-class.

The :valid pseudo-class only applies when the element’s value is not empty, except when the element is not required. For instance, optional fields with empty values are not considered invalid, but they are also not considered valid until the user enters acceptable data. This behavior allows developers to combine :valid with pseudo-classes like :focus or :hover for more interactive form styling.

Example usage:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  
  <label for="username">Username:</label>
  <input type="text" id="username" pattern="[A-Za-z0-9]{5,10}" required>
  
  <button type="submit">Submit</button>
</form>

input:valid {
  border: 2px solid green;
  background-color: #e6ffe6;
}

input:invalid {
  border: 2px solid red;
  background-color: #ffe6e6;
}

In this example, the email field will only be marked valid if it contains a correctly formatted email address. The username field will only be valid if it contains 5–10 alphanumeric characters. Styling changes triggered by :valid can be combined with CSS properties such as border-color, background-color, or outline to give users visual cues about the correctness of their input.