21 / 50

What does the :valid and :invalid pseudo-class do?

Understanding the :valid and :invalid Pseudo-Classes in CSS

The :valid and :invalid pseudo-classes in CSS are used to style form elements based on their validation state. They apply automatically when form inputs have constraints like required, pattern, type, min, or max.

How They Work

1
:valid – Selects form elements whose current value satisfies all HTML validation constraints.
2
:invalid – Selects form elements whose current value does not meet the validation requirements.
3
These pseudo-classes work dynamically as the user interacts with form fields, providing immediate visual feedback.

Example: Using :valid and :invalid

In this example, the email and password inputs will have a green border when their values are valid and a red border when invalid, giving users immediate feedback on the correctness of their input.

Best Practices

1
Use :valid and :invalid to provide real-time visual feedback on form fields, improving UX.
2
Combine with :focus or :hover for enhanced styling while interacting with the form.
3
Always pair CSS validation feedback with HTML5 validation or JavaScript for accessibility.
4
Test across browsers, as some older browsers may not fully support these pseudo-classes.

Difficulty: 3/10

Topics: CSS form validation, pseudo-class styling, user feedback states

Scenario Questions

0-2 years experience

1
How would you style a required email input to turn red when the user types an invalid email, and green when it's valid, using only CSS?
2
What happens if you apply :invalid to a text input that has no validation attributes like required or pattern?

2-5 years experience

1
A form field is showing :invalid styles even though the user entered a valid phone number — what could be wrong, and how would you debug it?
2
Our design team wants all form errors to use a red border, but :invalid is also styling fields that haven’t been touched yet — how do you fix that without JavaScript?

5-8 years experience

1
You're building a dynamic form with 50+ fields that use :valid/:invalid for real-time feedback — how do you avoid performance issues or layout thrashing during user input?
2
How would you design a reusable form component library that correctly handles :valid/:invalid states across different input types while maintaining accessibility and consistency?

8+ years experience

1
We’re migrating a legacy form system that relies on JavaScript validation to native HTML5 validation — what are the biggest risks in relying on :valid/:invalid across browsers and assistive technologies?
2
How would you architect a cross-team validation strategy where design, frontend, and QA teams all agree on the behavior of :valid and :invalid states, especially when legacy forms still use custom JS validation?

Follow-up Questions

❓How would you handle a case where :invalid styles conflict with your design system’s error state?
❓What happens if a form field is empty but not marked as required?
❓Why might :valid not trigger even when the input looks correct?