I recently came across this really intelligent implementation of :target class (here) and realised that there are so many useful psuedo classes that I'm not using..
There are about 40 psuedo classes and elements described in MDN docs (developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-c… and developer.mozilla.org/en-US/docs/Web/CSS/pseudo-e…)
What are some psuedo classes you use while writing your CSS? and what are some use cases where these come in handy?
Thanks for the nice info on :target! I looked it up and found this article to be very informative css-tricks.com/on-target
I personally do not use a lot of psuedo classes, just the usual ones like :hover, :active, :checked, :first-child/:last-child, :nth-child etc. and a lot of :before/:after Which I'm sure everyone must be using.
I've seen people using :checked class with checkboxes to trigger some CSS and eliminate writing something like .click() and addClass() in their javascript (like this example: codepen.io/marionebl/pen/fensm). interested in seeing what more can be done!
Interesting psuedo classes: nth-child(even),nth-child(odd),nth-child(2n),nth-child(2n + 5)(5-item position),only-child.
:not(.something) is my new favorite which I've been using a lot lately.
I have read some interesting articles on how to use the :nth-child selector to do things you wouldn't normally think of, like randomize css content or nth child of a*n+b.
Samuel Oloruntoba
Java is to JavaScript what Car is to Carpet.
Personally I've almost all selectors, but the ones I consider most useful or have used the most are
active, checked, disabled, empty, all the first-, the nth-, focus, fullscreen, hover, last-*, not, and invalid.
This is from a project I am currently working on, made with pseudo-elements.