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

HTML

The first paragraph 

The second paragraph

 

 

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.

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
}

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.