Difference between Pseudo classes and Elements(:: vs :)

Pseudo Elements:

Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.

Pseudo Classes:

Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and focus.)

/*CSS2*/

.example:before {}

.example:after {}

.example:first-child {}

/*CSS3*/

.example::before {}

.example::after {}

.example:first-child {}

They are not in DOM at all when inserted through CSS.