What are pseudo classes in CSS?

Pseudo classes in CSS

A pseudo class allows you to style the state of an element by targeting a particular part of an element. It is used to define a special state of an element. It can be combined with CSS selectors to add an effect to an existing element.

For Example, changing the style of an element when the user hovers over it, or when you visit a link. All of these can be done using Pseudo Classes in CSS. A pseudo class starts with a (:). Its general syntax is given below:

selector : pseudo class {property : value;}

Links can be displayed using anchor tag. There are many CSS pseudo classes. Let us discuss following pseudo classes which are most commonly used in CSS.

  • :link – It is used to add special style to an unvisited link.
  • :visited – It is used to add special style to a visited link.
  • :hover – It is used to add special style to an element when mouse moves over it by the user.
  • :active – Adds special style to an active element.
  • :focus – Add special style to an element when the element has focus.
  • :first-child – Add special style to an element which is first child of some other element.
  • :lang – Use this class to specify a language to use in a specified element.

The proper preference should be given to above classes while using them in your code. a:link and a:visited must come before a:hover to work it properly. Similarly a:active must come after a:hover to make it effective.

CSS code to test pseudo classes

<html>
   <head>
      <style type = "text/css">
         a:link {
	 color:pink;
	}
	a:visited {
	 font-family:corsiva;
	}
	a:hover {
	 cursor:pointer;
	 color:red;
	}
	a:active {
	 color:pink;
	}
	a:focus {
	 color:green;
	}
      </style>
   </head>
   <body>
        <a href = "www.programmingtutorial.in">Pink Link</a><br>
	<a href = "www.programmingtutorial.in">Yellow Link</a><br>
	<a href = "www.programmingtutorial.in">Pointer</a><br>
	<a href = "www.programmingtutorial.in">Active</a><br>
	<a href = "www.programmingtutorial.in">Active</a>
   </body>
</html>
pseudo classes

:first-child pseudo class

The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.

To make :first-child work in IE <!DOCTYPE> must be declared at the top of document.

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-decoration:underline;
	    color:red;
	    font-weight:bold;
         }
      </style>
   </head>
   <body>
      <div>
         <p>First paragraph in div. This paragraph will be underlined and bold with color red</p>
         <p>Second paragraph in div. This paragraph will not be kept normal</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the second div. This paragraph will not be effected.</p>
      </div>  
   </body>
</html>
:first-child pseudo class

The :last-child Pseudo-class

It matches the last element of some other element. Let us take above example with some modification.

<html>
   <head>
      <style type = "text/css">
        div#one > p:last-child {
            text-decoration:underline;
	    color:red;
	    font-weight:bold;
         }
      </style>
   </head>
   <body>
      <div id="one">
         <p>First paragraph in div. This paragraph will be not be affected</p>
         <p>Second paragraph in div. This paragraph will be kept be bold, underline and colored in green.</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p> 
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the second div. This paragraph will not be effected.</p>
      </div>  
   </body>
</html>
The :last-child Pseudo-class, www.programmingtutorial.in