There are about 40 psuedo classes and elements described in the MDN docs.
I realized that I hardly use a few of these, there are many psuedo classes that might be really useful but remain unused as they're not known that widely.
Here's a compiled list I've created on few interesting psuedo classes that would help enhance your CSS skills.
:target
Selects the current active element with its id when clicked on a URL containing that id as anchor.
Using :target you can apply styles(like animation) to an element when a link with its id as target has been clicked.
Interesting implementations: CSS only Modal, CSS Only interactive Calendar
more info: MDN docs
:checked
Finds out if a checkbox is checked or not.
Depending on the :checked class value, you can trigger some conditional CSS, thus eliminate writing something like .click() and addClass() in their javascript.
Example: Pure CSS Lightbox
more info: MDN docs
:fullscreen
Detects if the page is being viewed in full-screen mode or not and applies the fullscreen specific styles.
A page can be switched to view in fullscreen mode using Javascript Fullscreen API which provides a programmatic way to request fullscreen display from the user, and exit fullscreen when desired.
Demo: Fullscreen API Demo
more info: Fullscreen API, MDN docs
::backdrop
The ::backdrop pseudo-element is a box that the full screen element has behind it, but at the same time it sits above all other content.
Demo / info: CSS ::backdrop pseudo-element
:not
Taking a simple selector 'X' as an argument, :not matches an element that is not represented by that argument.
Example: Writing something like: p:not(.red) { color: black; } will select all the <p> tags that do not have a red class attached to them and apply a color: black; to them. which, in my openion is pretty cool.
more info: MDN docs
:nth-child()
Matches a number of child elements whose numeric position in the series of children matches the pattern an+b.
You can use nth-child with pre defined arguments like nth-child(even), nth-child(odd)or create your own arguments like: nth-child(2n), nth-child(2n + 5)(5-item position) etc.
You can do some interesting things with :nth-child selector that you wouldn't normally think of, like Randomizing content with CSS and Inventing new selectors
more info: MDN docs
:root
Styles written under :root gets applied directly to the root of the document(i.e. the <html>).
Using :root can also be useful to declare global CSS Custom Properties(Native CSS variables and mixins)
demos: :root selector styling, Native CSS mixin with :root and @apply
more info: MDN docs
:matches / :any
matches is a CSS4 selector(currently known as :any) which lets you combine similar selectors into groups from which any of the included items can match to the specific element and the styles could be applies.
So you can write your selectors like :matches(div, footer) .highlight instead of writing div .highlight, footer .highlight
demo: :matches selector example
more info: MDN docs
:empty
Represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.
With empty you can select an empty element and conditionally add content/styling to it when it has no content.
demo: :empty selector demo, adding content when element is empty
more info: MDN docs
:valid / :invalid
Identifies if the content in a element validates according to the input's type setting.
demo: CSS :valid / :invalid example
more info: MDN docs
:read-write
The :read-write pseudo-class targets the elements that can be edited by the user. It can work on elements that have the contenteditable HTML attribute as well.
Demo / info: :read-write demo
Conclusion
CSS psuedo classes can really enhance your CSS writing habits.
This was just a short list I put together for some interesting classes, there are a bunch of other ones too that can be really helpful!
Do share your favorites in the comments!