What is Pseudo-Class selector in CSS?

A pseudo-class define a special state of an css element. For an example, if you want to push any content before or after any element or style any element for mouse hovering or to focus on an element, you need to achieve the target via pseudo selectors. Pseudo-class selectors let you apply a style to an element on document tree content as well as other external factors like status of an content, mouse positions etc.

Syntax for pseudo selector?

Regular pseudo-class selector syntax -

selector : pseudo-class{
  property:value;
}

Special pseudo-class selector syntax (Before & After) -

selector :: pseudo-class{
  property:value;
}

Types of pseudo-class - As per mdn web docs, there are 7 types of pseudo-class. Those are -

1) Linguistic pseudo-classes 2) Location pseudo-classes 3) User action pseudo-classes 4) Time-dimensional pseudo-classes 5) Resource state pseudo-classes 6) The input pseudo-classes 7) Tree-structural pseudo-classes

[Examples of All types pseudo-classes updates very soon!]