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?
Java is to JavaScript what Car is to Carpet.
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.