top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

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

+1 vote
what is Pseudo-classes & Pseudo-elements in css?
posted Jul 6, 2014 by Vrije Mani Upadhyay

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote

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;
answer Jul 7, 2014 by Pankaj Deshmukh