Pseudo Class

Michael Gearon

Last updated on July 7, 2021

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

HTML

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

CSS

p:first-child{
  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

a:link{
  color: blue;
}

a:visited{
  color: purple;
}

:hover, :active and :focus pseudo classes

a:active{
  color: red;
}

a:hover{
  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.

:lang(language-code){
 //insert the styling for that language
}

Written by