Essential CSS Pseudo Classes

CSS Pseudo classes are the heart of CSS. Most of these classes are supported by all major browsers today. They make writing CSS simple and fun, as if there is no problem as such that can’t be handled with CSS Pseudo Classes without modifying the HTML. Let’s begin with some unknown Pseudo classes first.

:enabled and :disabled
Identifying elements state has become easy with these two classes. Also, they can be used as a good alternative to the enabled and disabled attribute selectors.



:empty
Have you ever got into a situation where some dynamically added empty elements disturb the layout? Well, the :empty class is here to help

:target
:target is generally used to point out/display/go to the selected element which is triggered by the hash(#) links. In web 2.0 this trend is becoming a quite famous as most developers are choosing to develop single page websites.

:nth-child()
This is a super-powerful class that can be used in most difficult situations. This class solves the issues that can only be resolved using JavaScript or jQuery. It accepts integer values and ‘odd’ and ‘even’ keywords. This can also be used in many different ways, such as - li:nth-child(2n+2), li:nth-child(-2n+3), :nth-of-type(), nth-last-child(), :nth-last-of-type().



:not()
This Pseudo class tells browser to apply CSS to all elements except the on that is in the parentheses of :not() class.

:hover

This is a widely known and used Pseudo class, almost all front-end developers are aware of it because of the most important use of it – 

a{ }

a:hover{}

We can easily include some simple classes in the same category - :focus, :active, :visited

:before and :after

These are the life saver classes! They help in most critical situations allowing us to make use of two virtual HTML elements without actually adding the elements in HTML. 

Additionally there are the :first-child, :last-child simple pseudo classes, you can try some simple examples with it and see for yourself :)