: V :: and class & element
Pseudo Classes :
:active, :checked, :disabled,
:focus, :hover, :invalid, :nth-child(n), :nth-last-child(n), :required, :valid.
Pseudo Elements :
Pseudo-elements keywords are used to set the style of a specific part of the selected element.
Some example are – :before, :after, :first-line, :first-letter etc.
EX :
p::first-line {
color: #ff0000;
}
Note:
The ::first-line, ::first-letter pseudo-element can only be applied to block-level elements.
h1::before {
content: '@';
}
h1::after {
content: '--';
}
double and single colon notation in pseudo-element “::” and “:”
In CSS1 and CSS2, The single-colon syntax was used for both pseudo-classes and pseudo-elements.
But in CSS3 for pseudo-element, double colon notation replaced single colon notation.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.