Thread by @stefanjudis

I somehow ended up the @MozDevNet page for CSS pseudo classes and holy moly... There's a bunch of them! 🤯

Let's look at the interesting ones (and that I maybe knew about but forgot). 🙈

@MozDevNet :autofill

> The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.

developer.mozilla.org/en-US/docs/Web…

:default

That's a fancy one. :D It matches e.g. the checked radio in a group.

> The :default CSS pseudo-class selects form elements that are the default in a group of related elements.

developer.mozilla.org/en-US/docs/Web…

:fullscreen

I've never used anything fullscreen but that's worth playing around with.

> The :fullscreen CSS pseudo-class matches every element which is currently in full-screen mode.

developer.mozilla.org/en-US/docs/Web…

Just because they're cool: :focus-within and :focus-visible.

If you haven't used them you should check them out!

developer.mozilla.org/en-US/docs/Web…

developer.mozilla.org/en-US/docs/Web…

:indeterminate

That's a weird one. :D It applies to e.g. checkboxes that are neither checked or unchecked (yeah, there's something in between). :)

developer.mozilla.org/en-US/docs/Web…

:picture-in-picture

Picture in picture? I definitely have to check that one out.

> The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.

developer.mozilla.org/en-US/docs/Web…

This list is long! But I'm getting side tracked by the picture in picture one now. :D

You find a complete list on MDN. 👇

developer.mozilla.org/en-US/docs/Web…