In my starting days of web development, I used to see Selectors, Pseudo-Classes and Psuedo-Elements as a super complex topics in CSS. But when I realized that I have been using them in many places without knowing the fact that these are the ones which I am always skeptical to understand.

Prior to knowing about Pseudo-Classes and Psuedo-Elements we need to understand what Selectors are first. And again knowing these basics in deep will be helpful for us upfront to write the CSS elements in a better way within less number of lines.

Selectors are the ones which helps us in selecting the elements belonging to a same category. The category could be based on elements with same #id or .class or attribute value([attr = value]) or element name(<>) or simply select all (*)

Pseudo-Classes are the ones which sub-categorize the elements belong to a same category ( i.e., Selector) based on the state of the elements or position of the elements or other properties like :not, :required, :checked etc. Pseudo-Classes are the ones which are identified by semicolon, so you will notice that there will be a semicolon( : ) in front of each pseudo-class.

If we do deeper in pseudo-classes based on state of elements, there are :link, :visited, :hover, :active and the order of these classes(LVHA) is important because there are properties common in all the 4 classes and will not work as expected if we change the order. (take a basic element and write CSS with these 4 elements and try changing the order and see what happens)

Pseudo-Elements are the ones which goes much deeper in categorizing the elements belong to a same category( i.e., Selector) and this allows to style part of an element like ::first-line, ::first-letter, ::selection or even adding a content ::before or ::after an element. Pseudo-Elements are identified by double semicolon, so you will notice that there will be a double semicolon( :: ) in front of each pseudo-class. (This was : in CSS1 and CSS2)