Michael Gearon

Pseudo Class

Michael Gearon

Last updated on

CSS3 Pseudo Element

A pseudo-class starts with a colon (:),it is similar to a class in HTML, but it’s not specified explicitly in the markup. When creating a pseudo-class there can not being any whitespace between a top selector or universal selector and the colon, nor can whitespace appear after the colon.

In this post we will look at the :first-child, :link, :visited, :hover, :active, :focus and the :lang pseudo-classes.

The description which W3 give about Pseudo Classes are:

Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ‘:first-child’, which can be deduced from the document tree, and ‘:lang()’, which can be deduced from the document tree in some cases.

:first-child pseudo class


 <p>The first paragraph</p>
 <p>The second paragraph</p>


  font-weight: light;
  line-height: 1.8em;
  font-size: 22px;

:link and :visited link pseudo classes

Browsers normally style a link that has been visited differently to one that hasn’t, this is the benefit of using the :visited pseudo class.

  • :link – this styles the link to a web page that has not been viewed by the user before
  • :visited – this styles the link to a web page that has been viewed by the user before
  color: blue;

  color: purple;

:hover, :active and :focus pseudo classes

  color: red;

  text-decoration: none; //this removes the underlines
  color: blue;
  background-color: yellow //a little tip, this would look ugly!

input:focus, textarea:focus{
  background: #eee; /*this is a light grey*/

:lang pseudo class

The :lang pseudo class matches elements based on the context of their given language attribute.

For example if you had Welsh and English pages you could style them differently using this pseudo class.

 //insert the styling for that language
Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects