2. pseudo-class syntax

2.1. Sample uses of pseudo-class


Using the :focus pseudo-class (run the code in Try It Yourself  Editor to see the output)




<!DOCTYPE html>
<html>
<head>
<style>
   /* please click on any of the textboxes to see the effect of input:focus */
  input:focus {
   background-color: yellow; 
  }
</style>
</head>
<body>
    First name: <input type="text" name="fname"><br> 
    Last name: <input type="text" name="lname"><br>
     <input type="submit" value="Submit">
</body>
</html>

Using pseudo-class with other classes in links. (run the code in Try It Yourself  Editor to see the output)




<!DOCTYPE html>
<html>
<head>
  <style>
  a.one:link {color:red;}
  a.one:visited {color:blue;}
  a.one:hover {color:orange;}
  a.two:link {color:red;}
  a.two:visited {color:blue;}
  a.two:hover {font-size:150%;}
  a.three:link {color:red;}
  a.three:visited {color:blue;}
  a.three:hover {background:orange;}
  a.four:link {color:red;}
  a.four:visited {color:blue;}
  a.four:hover {font-family:monospace;}
  a.five:link {color:red;text-decoration:none;}
  a.five:visited {color:blue;text-decoration:none;}
  a.five:hover {text-decoration:underline;}
  </style>
</head>
<body>
  <p>Mouse over the links:</p>
  <p><b><a class="one" href=# >This link changes color</a></p>
  <p><b><a class="two" href=#>This link changes font-size</a></p>
  <p><b><a class="three" href=#>This link changes background-color</
  a></b></p>
  <p><b><a class="four" href=#>This link changes font-family</a></p>
  <p><b><a class="five" href=#>This link changes text-decoration</a></p>
</body>
</html>