CSS - Pseudo Classes
CSS - Pseudo Classes
For adding special effects to some selectors, the CSS pseudo-classes are used.
Syntax:
Selector: pseudo-class {property: value} The following pseudo-classes are vastly used,
Link: It is used to insert some style into unvisited link. For example, a:link {color : #009900}
Visited: It is used to insert some style into the visited link. For example, a:visited {color : #009966}
Hover: It is used to insert some style to an element where the mouse goes over. For example, a:hover {color : #FFCC00}
Active: It is used to insert some style into an active element. For example, a:active {color : #CC00FF}
Focus: It is used to insert some style into a focused element. For example, a:focus {color : #0000FF}
First-child: It is used to insert some style into an element which is the first child of other element. For example, div > p:first-child { text-indent: 35px; } denotes to indent the first paragraph of all <div> elements by 35 px.
Example :
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
a:focus {color: #0000FF}
div > p:first-child {
text-indent: 35px;
}
</style>
</head>
<body>
<a href = "">Unvisited Link</a>
<br/>
<a href = "">Visited link</a>
<br />
<a href = "">Mouse over</a>
<br />
<a href = "">Click This Link</a>
<br />
<a href = "">Click this Link</a>
<div>
<p>First paragraph in div. This paragraph will be indented in 35px.</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>This paragraph is not under div tag, so it is not affected.</p>
</body>
</html>
Output:
