HTML5 Required input styling

Question

In HTML 5, we can mark inputs as required and then select them with the [required] pseudo-selector in CSS. But I only want to style them when they

Answer 1

I've resorted to using JavaScript to apply a class of .validated to the form on submit, then use that class to style :invalid fields, e.g.:

.validated input:invalid {
  ...
}

This way fields don't show up as invalid on page load, only after the form is submitted.

Ideally there would be a pseudo class applied to the form on submit.