CSS Pseudo Class Selectors

Pseudo class selectors are CSS selectors with a colon preceding them. A very familiar example would be, like hover:

a:hover { /* So here, hover is a pseudo class */ }

Mention those background colors, paddings, borders etc., when you want that to happen while you hover

Link related pseudo class selectors

:visited – Selects links that have already been visited by the current browser.

:hover – When the mouse cursor rolls over a link, that link is in its hover state and this will select it.

:active – Selects the link while it is being activated (being clicked on or otherwise activated).

Position/Number-based pseudo class selectors

:root – Selects the element that is at the root of the document. Almost certainly will select the element.

:first-child – Selects the first element within a parent.

:last-child – Selects the last element within a parent.

:nth-child() – Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n-1”). Has the ability to do things like select even/odd elements, “every third”, “the first five”, and things like that.

Content-related pseudo “elements”

These are quite familiar and widely used

::before – Is able to add content before a certain element.

::after – Is able to add content after a certain element.

This is just brief introduction for pseudo class selectors. I hope you find this useful...