Pseudo-classes affect the
styling based on user
interaction or element position.
Pseudo-elements can create
new content or style specific
portions of the element's content.
Example:
Here, :focus is an
element's state that gets triggered
by user interaction.
:nth-child and :first-of-type
are element positions.
::marker is
targeting a specific part of
the element.