CSS Pseudo Classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). The Pseudo-classes are used to add special effects on elements. For example with pseudo classes we can change the style of an element when a user mouses over it or change style of visited and unvisited links differently, change style of an element when it gets focus etc. The syntax of pseudo-classe is :
 selector:pseudo-class {property: value;}
Some of the commonly used pseudo-classes are as follows :

:link  :- The link selector is used to select universal links. With this pseudo-class we can set the color or links in a web page. Syntax :
 selector:link {
    css declarations;
 }
For Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      a:link {
        color: red;
    }
    </style>
  </head>
  <body>
    <a href="">Click Here</a><br/>
    <a href="">Click Here Again</a>
  </body>
</html>
Output :

Click Here

Click Here Again


:visited :- The visited selector is used to select visited links. With this pseudo-class we can add special style to a visited link. Syntax :
 selector:visited {
   css declarations;
 }
Example of visited selector :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
 color: red;
  }

  a:visited {
   color: green;
  }
</style>
</head>
<body>
 <a href="">Click Here</a>
 <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here

Click Here Again

Also note that due to security reasons, the browsers implement some limits in styling the visited links. The allowed styles are :
  • color
  • background-color
  • broder-color
  • outline color
  • column-rule-color
  • the color part of fill and stroke

:hover :- The hover selector is used to select elements when you mouse over them. With this pseudo-class we can add special style to an element when the mouse over it. Syntax :
 selector:hover {
   css declarations;
 }
Example :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
 color: red;
  }

  a:visited {
   color: green;
  }

  a:hover {
   color: blue;
  }
</style>
</head>
<body>
 <a href="">Click Here</a>
 <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here

Click Here Again


:active :- The :active selector is used to select and style the active link. A link becomes active when we click on it. The :active selector can be used on all elements, not only links. With this pseudo-class we can add special style to an active element. Syntax :
 selector:active {
   css declarations;
 }
Example :
<!DOCTYPE>
<html>
<head>
<style>
  a:link {
 color: red;
  }

  a:visited {
   color: green;
  }

  a:hover {
   color: blue;
  }

  a:active {
   color: black;
   background-color: red;
  }
</style>
</head>
<body>
 <a href="">Click Here</a>
 <a href="">Click Here Again</a>
</body>
</html>
Output :

Click Here

Click Here Again


:focus :- The :focus selector is used to select the element that has focus. The :focus selector is allowed on elements that accept keyboard events or other user inputs. With this pseudo-class we can add special style to an element while the element has focus. Syntax of :focus :
 selector:focus {
   css declarations;
 }
Example :
<!DOCTYPE>
<html>
<head>
<style>
 input:focus {
  background-color: yellow;
 }
</style>
</head>
<body>
 <p>Type Something in the Input Box</p>
  Name : <input type="text" name="name">
  Age : <input type="number" name="Age">
 </form>
</body>
</html>
Output :

Type Something in the Input Box
Name :

Age :


:first-child :- The :first-child selector is used to select the specified selector, only if it is the first child of its parent. With this pseudo-class we can add special style to an element that is the first child of some other element. Syntax :
 :first-child {
   css declarations;
 }
Example :
<!DOCTYPE>
<html>
<head>
<style>
    div:first-child p {
 color: red;
 font-weight: bold;
    }
</style>
</head>
<body>
  <div>
     <p> This is the First paragraph.</p>
     <p> This is The third Paragraph</p>
  </div>
  <div>
     <p> This is The Third Paragraph.</p>
     <p> This is the fourth One</p>
  </div>
</body>
</html>
Output :

This is the First paragraph.
This is The Second Paragraph
This is The Third Paragraph.
This is the fourth One

Similarly we also use :last-child and :nth-child(), where with the :last-child select we can select last item and with :nth-child(N) the N number of item will be select. Example :

:last-child
<style>
  div:last-child p {
    color: red;
    font-weight: bold;
  }
</style> 

:nth-child(N)
<style>
  div:nth-child(2) p {
    color: red;
    font-weight: bold;
  }
</style>


:lang :- The :lang() selector is used to select elements with a lang attribute with the specified value. The lang attribute value is most often a two-letter language code, like lang="fr" (for French). This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and '). Syntax :
:lang(language) {
  css declarations;
}
Example :
<!DOCTYPE>
<html>
<head>
  <style>
    :lang(en) { 
       quotes: '"' '"'; 
    }
    :lang(fr) { 
       quotes: "<<" ">>";
  </style>
 </head>
 <body>
   <p><q lang="en">Hello world in English</q></p>
   <p><q lang="fr">Bonjour tout le monde en fran├žais</q></p>
 </body>
</html>
Output :

"Hello world in English"
<<Bonjour tout le monde en fran├žais>>

The complete list of Standard CSS Pseudo-classes can be found here : Click here

Next Topic :