What is the difference between pseudo-classes and pseudo-elements in CSS?

Explanation

Pseudo-classes (single colon, :) select elements based on their state or position in the document tree: :hover, :focus, :nth-child, :first-child, :not, :checked. Pseudo-elements (double colon, ::) select portions of an element or generate virtual elements: ::before, ::after, ::first-line, ::selection. The double-colon syntax was introduced in CSS3 to distinguish them. Pseudo-classes answer 'which elements?' while pseudo-elements answer 'which part of the element?'