What are Pseudo elements and Pseudo classes?
Pseudo-elements allows us to create items that do not normally exist in the document tree, for example ::after.
- ::before
- ::after
- ::first-letter
- ::first-line
- ::selection
In the below example, the color will appear only on the first line of the paragraph.
p: :first-line {
color: #ffOOOO;
font-variant: small-caps;
}
Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.
- :link
- :visited
- :hover
- :active
- :focus
For an example in the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.
/* mouse over link */
a:hover {
color: #FFOOFF;
}