CSS pseudo classes
With CSS pseudo classes, you can add special effects to some elements.
This lesson 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{
/* Set links on the page to green */
color: green;
}
/* Set visited links to blue */
a:visited{
color: blue;
}
/*
When the user moves the mouse over a link
it should be gray, underlined, and have a
background color of aliceblue
*/
a:hover{
color: gray;
background-color: #F0F8FF;
text-decoration: underline;
}
/* Set the color of links that are clicked on to black */
a:active{
color: black;
}
-->
</style>
</head>
<body>
<a href="http://www.landofcode.com" target="_blank">
Landofcode.com main page
</a>
<br /><br />
<a href="http://www.landofcode.com/view/html/"
target="_blank">
Landofcode.com HTML section
</a>
<br /><br />
<a href="http://www.weather.com"
target="_blank">
Find out local weather
</a>
<br /><br />
<a href="http://www.bluebottle.com" target="_blank">
Bluebottle e-mail service
</a>
</body>
</html>
Output:
In the above example, four pseudo classes are used to specify how links should appear. These pseudo classes are used together with the "a" selector.
The first pseudo class (link) specifies that links on the page should be green.
The second psuedo class (visited) specifies that visited links should be blue.
The third pseudo class (hover) specifies that links that the user moves the mouse over should be gray, underlined, and have a background color of aliceblue.
The fourth pseudo class (active) specifies that links that are clicked on should be black.
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"> <!-- /* links that are part of the "html" class should be green */ a.html:link{ color: green; } /* links that are part of the "html" class that have already been visited should be gray */ a.html:visited{ color: gray; } --> </style> </head> <body> <a href="http://www.landofcode.com" target="_blank"> Landofcode.com main page </a> <br /><br /> <a href="http://www.landofcode.com/view/javascript/" target="_blank"> Landofcode.com Javascript section </a> <br /><br /> <a class="html" href="http://www.landofcode.com/view/html/lessons/" target="_blank"> Landofcode.com HTML lessons </a> <br /><br /> <a class="html" href="http://www.landofcode.com/view/html/examples/" target="_blank"> Landofcode.com HTML examples </a> </body> </html>
Output:
In the above example, two pseudo classes are used to specify how links of a certain class should appear. These pseudo classes are used together with the "a" selector, and the "html" class.
The first pseudo class (link) specifies that links that are part of the "html" class should be green.
The second pseudo class (visited) specifies that links that are part of the "html" class that have already been visited should be gray.
