WHAT ARE PSEUDO-CLASSES IN CSS?
Pseudo-classes are used to add special styles to an element or a selector but only with the condition that the element is in a particular state.
These Pseudo classes are attached with a colon (:) at the beginning of the keyword, which calls out the action and acts as a separator between the selector and the keyword. Here is an example to illustrate how it is written;
SELECTOR :PSEUDO-CLASS {PROPERTY: VALUE;PROPERTY: VALUE;PROPERTY: VALUE;}Below is a list of the top ten most used pseudo-class.
:hover
The “:hover” selector is the most used selector worldwide. This pseudo-class occurs when the user mouse over not just a link but any element. It modifies the appearance of an element while the pointer is over it, undermining whether the element has not been dragged or clicked. It is super cool to use this selector because it attracts the user’s attention.
/* Any button over which the user's pointer is hovering */button:hover { color: blue;}:active
The “:active” selector based on website features is the second most used selector in CSS. It is used to select and add styles to active links. An active link is a link that is considered active when a user clicks on it.
It may likely be a color change to inform the user that the element is currently in action. It is more advantageous than the “:visited” selector because it doesn’t only apply to just links but also Html elements.
:link
The “:link” is just an indicator that styles links that have not yet been visited, but once that link has been clicked/visited, the style applied to the :link will no longer function. It will then inherit the style for the: visited link.
:visited
The “:visited” selector is widely used by websites worldwide due to its importance. This selector is used to select links that have been clicked on and visited to inform the user that the highlighted link has already been visited.
Allowed styles for this pseudo-class selector are;
- Color property
- Background-color property
- Outline-color
- Column-rule-color
- Border-color
- The color parts of strokes and fills
NB: All other styles are inherited from the a:link.
:focus
The “:focus” selector is one major pseudo-class selector which is used on elements that accept keyboard events or other different user inputs like the <form> input. It takes place on events like when the user clicks/focus on an enabled <textarea> or <input>.
:not(element)
The “:not(element)” selector works as an excluding function, i.e., whenever you set a particular style for the :not(p) like “color :grey;” it will then make all color to be grey in the document excluding from the p element.
EXAMPLE::not(element){Property: value;}:checked
The “:checked” selector is used in the checked element in the input, which applies to only radio buttons, checkboxes, and <option> elements.
EXAMPLE::checked{Property: value;}:root
The “:root” selector is another commonly used pseudo-class in css5 that refers to the root element of the document, and in HTML5, the root element is always the html.
HTML CODE 
:nth-of-type(n)
The “:nth-of-type(n)” matches every element that is the nth child of a particular type(example p, li, a) of a particular parent. A number or keyword can represent the “n”.
EXAMPLE::nth-of-type(n){Property: value;}:required
The “:required” pseudo-class selects form elements originally specified to be required. It only applies to form elements, e.g., input, textarea, and select.
EXAMPLE::required{Property: value;}CONCLUSION
This post briefly discussed some popular pseudo-selectors that are widely used by most Front-end programmers that work with CSS. With these pseudo-classes listed, you can now apply styles to elements whenever they are in a certain state.
