Pseudo classes
Pseudo classes are used to apply styles to an element in a certain state.
| Pseudo classes | Explanation |
|---|---|
| link | applies style to an unvisited link (links only) |
| visited | applies style to an visited link (links only) |
| hover | applies style to an element when the mouse is placed over it |
| active | applies style to an activated element |
| focus | applies style to an element while it has the focus |
| lang | applies style to an element that include the specified language |
Syntax
There is a colon between the selector and the pseudo class.
Selector:Pseudo-class { Property: Value }
For example :
a:link { color: red }
Pseudo classes can also be used with normal classes.
Selector.Normal-class:Pseudo-class { Property: Value }
For example :
a.example:link { color: red }
Anchor pseudo classes
When you use the following pseudo classes for the A element, the style can be applied according to the state of the link.
a:link { color: #0000ff; } /* Non-visited link color */
a:visited { color: #0000a0; } /* Visited link color */
a:hover { color: #ff0000; } /* Hover link color */
a:active { color: #ffff00; } /* Active link color */
These styles are applied to all links in the document.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
a:link { color: #0000ff; }
a:visited { color: #0000a0; }
a:hover { color: #ff0000; }
a:active { color: #ffff00; }
</style>
</head>
<body>
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../index.html">CSS Properties</a></li>
<li><a href="index.html">Relation Document</a></li>
</ul>
</body>
</html>
Pseudo classes and Normal classes
The style can be applied only to the links with the specified class by using the normal class.
a.example:link { color: #0000ff; }
a.example:visited { color: #0000a0; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ffff00; }
In the above example, the styles are applied only to the links that have the class "example".
<html>
<head>
<title>TAG index</title>
<style type="text/css">
a.example:link { color: #0000ff; }
a.example:visited { color: #0000a0; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ffff00; }
</style>
</head>
<body>
<ul>
<li><a href="../../index.html" class="example">The styles are applied to this link.</a></li>
<li><a href="../index.html" class="example">The styles are applied to this link.</a></li>
<li><a href="index.html">The styles are not applied to this link.</a></li>
</ul>
</body>
</html>
Nesting
The style can be applied only to the links within a certain element by using descendant selectors.
Type selectors and Pseudo classes :
In this example, the styles are applied only to the links within the UL element.
ul a:link { color: #0000ff; }
ul a:visited { color: #0000a0; }
ul a:hover { color: #ff0000; }
ul a:active { color: #ffff00; }
Class selectors and Pseudo classes :
In this example, the styles are applied only to the links within the element with the class "example".
.example a:link { color: #0000ff; }
.example a:visited { color: #0000a0; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ffff00; }
ID selectors and Pseudo classes :
In this example, the styles are applied only to the links within the element with the ID "example".
#example a:link { color: #0000ff; }
#example a:visited { color: #0000a0; }
#example a:hover { color: #ff0000; }
#example a:active { color: #ffff00; }
Nesting example :
<html>
<head>
<title>TAG index</title>
<style type="text/css">
.example a:link { color: #0000ff; }
.example a:visited { color: #0000a0; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ffff00; }
</style>
</head>
<body>
<ul class="example">
<li><a href="../../index.html">The styles are applied to this link.</a></li>
<li><a href="../index.html">The styles are applied to this link.</a></li>
<li><a href="index.html">The styles are applied to this link.</a></li>
</ul>
<ul>
<li><a href="../../index.html">The styles are not applied to this link.</a></li>
<li><a href="../index.html">The styles are not applied to this link.</a></li>
<li><a href="index.html">The styles are not applied to this link.</a></li>
</ul>
</body>
</html>
The focus pseudo class
The focus pseudo class apply style to an element while it has the focus.
input:focus { background-color: #f2f2f2; }
In the above example, the style is applied to the INPUT element while it has the focus.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
input { width: 200px; }
input:focus { background-color: #f2f2f2; }
</style>
</head>
<body>
<form method="POST" action="sample.cgi">
<p><input type="text" name="name"></p>
<p><input type="text" name="address"></p>
<p><input type="text" name="email"></p>
</form>
</body>
</html>
The lang pseudo class
The lang pseudo class apply style to an element that include the specified language.
p:lang(en) { color: red; }
en = Language code
In the above example, the style is applied to the P element that include the specified language (en).
<html>
<head>
<title>TAG index</title>
<style type="text/css">
p:lang(fr) { color: #4040FF; }
</style>
</head>
<body>
<p lang="fr">Bonjour</p>
<p lang="en">Hello</p>
</body>
</html>