What is Pseudo?

In UI term, 'Pseudo' prefix is term of reflection of the style pattern towards the different elements of HTML attributes.

For Example-

Anchor tag<a> have different kind of style behavior such as- a:link, a:hover, a:visited etc.

Here, anchor tag "<a>" have different style and different behavior in different mode such as content link in 'normal mode' and content link in 'hover mode' and content link in 'visited mode'.

What is Pseudo-elements or CSS Pseudo Elements ?

A CSS Pseudo-element is apply to style definite section of an element. In simple words, if we need a different outlook to specific part of an Web content.

For example, it can be used to:

• Design the first text, or line, of an element

• Insert particular data before, or after the web content of an element.

Design the first letter of the text in all <h1> elements:

h1::first-letter  {
    color:  #ff0000;
    font-size: 20px;
} 

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

**Notes-

In old version of CSS, we used just one colon(:) instead of double colons(::). 'Double Colon' feature is a part of CSS3 and now a days most browsers support both values.

Below I am providing the best way to know, compatibility of browsers and Psuedo-Elements.

What are Pseudo-classes ?

A Pseudo-class is a way to define a unique part of HTML elements. A Pseudo-class is similar to a simple class of HTML.

For Example-

• To Design a content or an element, when a user mouses over it.

• To separately Design visited and unvisited links

**Note-

A pseudo-class starts with a colon (:).

Syntax

The Syntax of Pseudo-elements:

selector:pseudo-class {
  property:value;
} 

Anchor Links can be displayed in different ways:

/* For unvisited link */

a:link {
  color: #FF0000;
}

/* For visited link */

a:visited {
  color: #00FF00;
}

/* For mouse over link */

a:hover {
  color: #FF00FF;
}

/* For selected link */

a:active {
  color: #0000FF;
}

Pseudo-classes use formal elements but in certain situation, like when elements have relative position to siblings or when elements are in a particular condition.

Following are the pseudo-classes in CSS3: