Frontend developers don’t just need to understand how to write CSS on HTML elements, they also need to know how to write it for forms.

As you've seen in many examples and challenges we've done so far, a common way of styling forms is to use CSS pseudo classes (like :valid, :invalid, :checked etc) and pseudo elements (like ::before, ::after, ::placeholder-shown), but where can you find them all?

In my early days of web design, I had to learn things the hard way: trial and error.

One way is to log something out like an <input> element and make educated guesses (it has a checked property and a required property for example, which are also both pseudo-classes) BUT the best way is to read documentation.

I know, boring, right!

But don't stress, I'll give you the links right now.

What documentation?

W3 organisation defines specs for these sort of things (e.g. the Selectors Level 4, CSS Level 1 and CSS Level 2, etc.). For example, click here for the spec on the :valid and :invalid pseudo classes.

MDN is a also great source of information, and even lists all input pseudo classes for you here.

Enjoy :)