1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS pseudo classes

With CSS pseudo classes, you can add special effects to some elements.

This tutorial focuses on:

Using pseudo classes

You can use a pseudo class by referencing it by name.

selector:pseudo-class {property: value}
<html> <head> <title>Pseudo classes</title> <style type="text/css"> a:link {color: green;} a:visited {color: blue; } /* When the user moves the mouse over a link it should be gray, have a background color of aliceblue, and should not be underlined */ a:hover{ color: gray; background-color: #f0f8ff; text-decoration: none; } /* Set the color of links that are clicked on to black (the moment they are clicked on) */ a:active {color: black;} </style> </head> <body> <a href="http://www.landofcode.com" target="_blank">Landofcode.com main page</a> <br /> <a href="http://www.landofcode.com/html-tutorials/" target="_blank">HTML tutorials</a> <br /> <a href="http://www.weather.com" target="_blank">Find out local weather</a> <br /> <a href="http://www.bluebottle.com" target="_blank">Bluebottle e-mail service</a> </body> </html>

Using pseudo classes with regular classes

You can use pseudo classes with regular classes.

selector.class:pseudo-class {property: value}
<html> <head> <title>Pseudo classes with regular classes</title> <style type="text/css"> a.html:link {color: green;} a.html:visited {color: gray;} </style> </head> <body> <a href="http://www.landofcode.com" target="_blank">Landofcode.com main page</a> <br /> <a href="http://www.landofcode.com/javascript-tutorials/" target="_blank">Javascript tutorials</a> <br /> <a class="html" href="http://www.landofcode.com/html-tutorials/" target="_blank">HTML tutorials</a> <br /> <a class="html" href="http://www.landofcode.com/html-examples/" target="_blank">HTML examples</a> </body> </html>

In the above example, only the two bottom links are affected by the styles because they are part of the html class.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information