Pseudo-Classes

A CSS Technique to apply certain style to an html element when that element is at certain state.

A CSS pseudo-class is simply a keyword added to the end of a selector separated by a colon. Here's what the syntax looks like:

selector:pseudo-class {

property: value;

property: value;

property: value;

}

They are often used to style links that are visited differently from other links, so, unvisited links are blue, but once visited, they turn purple. Another example is when the mouse hovers over an element.

There are several pseudo-classes available in CSS. Let's understand how they are used with an example.

Here's some HTML:

<a href='http://www.google.com'>Google here</a>

And here's some CSS:

a:link {

  color: blue;

}

a:visited {

  color: black;

}

a:hover {

  background-color: grey;

}

a:active {

  color: red;

}

As you can see, the 'a' selector is followed by the pseudo-class and this is followed by the CSS property declarations.

Pseudo Classes Types

The :link pseudo-class is applicable to those links that have not been visited. We want these links to be colored blue.

The :visited pseudo-class is applicable for those links that have been visited. We want these links to be colored black.

The :hover pseudo-class is applicable when the mouse hovers over a link. We want these links to have a grey background. Once the mouse moves away from the link, then the background color changes back to white.

The :active pseudo-class is applicable for those links that are selected when the mouse is clicked. We want these links to turn red when clicked.