CSS pseudo classes
With CSS pseudo classes, you can add special effects to some elements.
This tutorial focuses on:
- Using pseudo classes
- Using pseudo classes with regular classes
Using pseudo classes
You can use a pseudo class by referencing it by name.
Syntax:
selector:pseudo-class {property: value}
Example:
<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>
Output:
Using pseudo classes with regular classes
You can use pseudo classes with regular classes.
Syntax:
selector.class:pseudo-class {property: value}
Example:
<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>
Output:
In the above example, only the two bottom links are affected by the styles because they are part of the html class.