what is Pseudo-classes & Pseudo-elements in css?

Answer 1

Both pseudo-classes and pseudo-elements are used to add special effects to some selectors.

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

Example for Pseudo-classes :

Links can be displayed in different ways in a CSS-supporting browser:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

PSEUDO-ELEMENTS are used to address sub-parts of elements. They allow you to set style on a part of an element's content beyond what is specified in the documents.

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements.

Example for Pseudo Element:

Format the first line of the text in p elements:

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}