:required CSS Pseudo Class

The :required pseudo-class in CSS is used to select form elements that are required for user input. It specifically targets elements with the required attribute in HTML forms, allowing developers to style them differently from optional fields. This can be particularly useful for providing visual cues to users about which inputs must be completed before submitting a form. Commonly used elements with :required include input, select, and textarea elements.

When combined with other pseudo-classes like :invalid, :required allows for precise control over form validation styling. For example, you might highlight required fields that the user has not yet filled in red, while optional fields remain neutral.

This pseudo-class does not affect the behavior of the form itself - it is purely for styling purposes. Its effect is applied dynamically, meaning that if an element has its required attribute added or removed via JavaScript, the styling updates automatically without needing to refresh the page.

Example usage:

<form>
  <label for="username">Username (required):</label>
  <input type="text" id="username" name="username" required>

  <label for="nickname">Nickname (optional):</label>
  <input type="text" id="nickname" name="nickname">

  <button type="submit">Submit</button>
</form>

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

input:optional {
  border: 2px solid #ccc;
  background-color: #f9f9f9;
}

In this example, the username field is visually distinguished as required using a red border and light red background, whereas the optional nickname field uses neutral styling.

The :required pseudo-class is particularly helpful in improving form usability and accessibility, as it clearly communicates mandatory fields to users without requiring additional scripting. It works in all modern browsers and can be combined with other selectors and pseudo-classes for complex styling scenarios.