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;


Posted by: - Fri, Jun 3, 2022. This article has been viewed 589 times.
Online URL: https://www.articlediary.com/article/what-are-pseudo-elements-and-pseudo-classes-1064.html

Powered by PHPKB (Knowledge Base Software)