in

CSS PSEUDO CLASSES | Learn How to Add Special Effect To Selectors

In this tutorial we will be looking at CSS pseudo classes and how to style selectors using pseudo class properties. In our previous tutorial we looked at CSS layers and how you can control the layers of overlapping elements using the z-index property. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS LAYERS | Set The Layers Of Web Page Elements Using CSS

CSS PSEUDO CLASSES

As a developer you might come across the need to add effects to some selectors during the course of developing a web page. For example you might need to use colors to differentiate between a hovered link, visited link and even an active link. This can be achieved using the CSS pseudo classes. We can as well achieve this using JavaScript but it is better off done using CSS.  The syntax for pseudo classes is shown below

selector:pseudo-class {property: value}

When used with a class property

selector.class:pseudo-class {property: value}

The commonly used CSS pseudo classes include:

  • :link – use to add style to an unvisited link
  • :visited – use to add style to a visited link
  • :hover – use to add style to a hovered link
  • :focus- use to add styles to a focused element
  • :active – use to add style to an active or clicked link
  • :lang-use to specify the language to use in an element

Please note: In css we have this link properties placed accordingly in other for them to be effective. For example, a:hover property will come after a:link property and a:visited property in the CSS for the link styling to be effective. Also, a:active property come after a:hover property in the CSS.

Also note that pseudo class names are not case sensitive and pseudo classes are different from CSS classes but can be combined.

The :link pseudo class

This pseudo class is used to add style to an unvisited link. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type = "text/css">
      a:link {color: blue;}
   
   </style>

   <title>ILLUSTRATION OF :link PSEUDO CLASS PROPERTY</title>
</head>
<body>
 <a href="">click me</a>
</body>
</html>

RESULT

ILLUSTRATION OF :link PSEUDO CLASS PROPERTY click me

The :visited pseudo class

The :visited pseudo class property is used to add effect to a visited link. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type = "text/css">
      a:visited {color: red;}
   
   </style>

   <title>ILLUSTRATION OF :visited PSEUDO CLASS PROPERTY</title>
</head>
<body>
 <a href="">click me</a>
</body>
</html>

RESULT

ILLUSTRATION OF :visited PSEUDO CLASS PROPERTY click me

The :hover pseudo class

:hover pseudo class property can be used to add a special effect to an element when a cursor hovers over the element such as a link. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type = "text/css">
      a:hover {color: green;}
   
   </style>

   <title>ILLUSTRATION OF :hover PSEUDO CLASS PROPERTY</title>
</head>
<body>
 <a href="">click me</a>
</body>
</html>

RESULT

ILLUSTRATION OF :hover PSEUDO CLASS PROPERTY click me

The :focus pseudo class

The below example shows how to use the focus pseudo class to change the color of focused links

<!DOCTYPE html>
<html lang="en">
<head>
   <style type = "text/css">
      a:focus {color: blue;}
   
   </style>

   <title>ILLUSTRATION OF :focus PSEUDO CLASS PROPERTY</title>
</head>
<body>
 <a href="">click me</a>
</body>
</html>

RESULT

ILLUSTRATION OF :focus PSEUDO CLASS PROPERTY click me

The :active pseudo class

This property is used to style an active link. An active link is a link that is receiving clicks. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type = "text/css">
      a:active {color: brown;}
   
   </style>

   <title>ILLUSTRATION OF :active PSEUDO CLASS PROPERTY</title>
</head>
<body>
 <a href="">click me</a>
</body>
</html>

RESULT

ILLUSTRATION OF :active PSEUDO CLASS PROPERTY click me

The :lang pseudo class

When developing web pages that must serve for different languages we can use the pseudo class :lang to setup selectors based on the language setting. For example the french makes use of angle brackets when quoting while the English makes use of double quote when quoting. We can use the :lang pseudo class to determine the type of quote that comes up based on our preference. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <style type="text/css">
      :lang(en) { quotes: '"' '"'  "'"  "'"; }
      :lang(fr) { quotes: "<<" ">>" "<" ">"; }
   </style>

   <title>ILLUSTRATION OF :lang PSEUDO CLASS PROPERTY</title>
</head>
<body>
   <p>...<q lang = "en">ILLUSTRATION OF THE ENGLISH QUOTE STYLE</q>...</p> <br>

   <p>...<q lang = "fr">ILLUSTRATION OF THE FRENCH QUOTE STYLE</q>...</p>
</body>
</html>

RESULT

ILLUSTRATION OF :lang PSEUDO CLASS PROPERTY

ILLUSTRATION OF THE ENGLISH QUOTE STYLE


ILLUSTRATION OF THE FRENCH QUOTE STYLE

CONCLUSION

CSS pseudo classes helps developers setup special effect for elements. This is a very important property when constructing web pages. A good knowledge of this will help you structure good use of pseudo classes. Lets move on to the next topic on CSS PSEUDO ELEMENTS

What do you think?

css layers

CSS LAYERS | Set The Layers Of Web Page Elements Using CSS

css pseudo elements

CSS PSEUDO ELEMENTS | Add Special Effect Using Pseudo Element