Introduction

The purpose of CSS selectors is to select the HTML element on while CSS styling is to be applied.
Pseudo Selectors allow us to style HTML element differently in different states In this blog, we will see different pseudo-selectors and their use cases.

Pseudo-selectors related to links:

:link - This selects all the links inside an element if they contain [href] attribute. Note that this selector doesn't select all the elements until or unless it contains href attribute.
:visited - This selects the links that have been visited by the browser.
:hover - This is perhaps the most commonly used selector not only for links but also for other HTML element as well. When the mouse cursor is above a link selected by this property, then the link gets into the hover state and other properties can be applied onto it.
:active - This selector is used for selecting links that are being pressed or somehow is in "active" state. For example, when a button-like link is pressed, then it assumes an "active" state.

Pseudo-selectors based on positon-based elements:

:root - This selector selects the element that is at the root of the HTML document.
:first-child - This selector selects the first child within an element.
:last-child - This selector selects the last child within an element.
:nth-child() - This selector selects the the child defined by the algebraic expression, like 2n, 2n-1, most specifically to select childs within an element with a pattern like odd childs or even childs.
:nth-of-type() - Works like the above pseudo-selector but used in places where the elements at the same level are of different types. For example, we have two divs and each of the div contains some paragraphs and images, then the div img: nth-of-type(odd) would select all the oddly positioned image tags.

:first-of-type - This selector selects the first element of the mentioned type within any parent. For example, for two divs, there are elements inside the order like paragraph, image, paragraph and image. So the selector div img: first-of-type would select the first image in the first div as well as the first image in the second div.
:last-of-type - This selector works the same way as above but in this selection method the last element of the mentioned type within the parent is selected. So from the above mentioned example, div img: last-of-type would select the last image in the first and second div.]
:nth-last-of-type() - This selector also works like :nth-of-type() but instead of counting from top, the counting is done from the bottom.
:nth-last-child() - This selector works like :nth-child() but counting is done from the bottom up to the top.

Some Interesting Pseudo Selectors and Elements:

::after - This allows us to add content after the element.
::before - This allows us to add content before the element.
::first-letter - This selects the first letter of the text in the element and is very useful in manipulating it.
::first-line - This selects the first line of the text in the element.

:not() - This selector removes the mentioned argument related child elements from the parent element. For example, inside a div we want to select all the child element except those that contains class of "remove", then we can use div:not(.remove) for the purpose. :empty - This selector selects the element that contains no content or text and child elements.

For this blog, I have referenced CSS-Tricks and MDN Web Docs.
There are so many pseudo-selectors in CSS that are not possible to be covered in a single blog, so I would recommend to go through the references mentioned above, they are literally the gold-mine for CSS knowledge and frontend in general.