Home »
CSS
Pseudo Classes | CSS
Pseudo Classes | CSS: In this article, we are going to learn what Pseudo class is, what is its syntax and how to use it?
Submitted by Akash Kumar, on November 07, 2018
These classes are basically used to add special effects to some selectors or in other words, we can say that A pseudo-class is basically used to define a special state of an element.
Through pseudo-classes, we don't require javascript or any other script for these effects.
The basic syntax of pseudo-classes as follows:
selector:pseudo-class {property: value}
We can also write it in another way such as follows:
selector.class:pseudo-class {property: value}
The most commonly used pseudo-classes are:
- :link
- :visited
- :hover
- :active
- :focus
- :first-child
When we are defining pseudo classes in between opening and closing style tag following points should be noted.
- The name of pseudo classes are not case sensitive.
- These are basically different from CSS classes but then can be combined.
-
In order to make CSS definition more effective following points should be keep in mind.
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Basic Uses of Pseudo-Classes are as follows
- It can be used to style an element when moves move over it.
- It can style they visited and unvisited links differently.
- We can style an element when it gets focus.
Let’s discuss commonly used pseudo classes one by one:
1. :link
This is basically used to add special style to an unvisited link. The following example shows how to use the :link class to set the color of link.
<html>
<head>
<style type="text/css">
a:visited {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP!!!</a>
</body>
</html>
2. :visited
This is basically used to add style to the previously visited link. The following example shows how to use the :visited class to set the color of previously visited link.
<html>
<head>
<style type="text/css">
a:visited {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>
3. :hover
This is basically used to add special style to the element when we move mouse over it. The following example shows how to use the :hover class to change the color of links when mouse moves over it.
<html>
<head>
<style type="text/css">
a:hover {
color: #0000FF
}
</style>
</head>
<body><a href="">Move Mouse here</a>
</body>
</html>
4. :active
This class is basically used to add special style to the element that are active. The following example shows how to use the :active class to change the color of all active links.
<html>
<head>
<style type="text/css">
a:active {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>
5. :focus
This class is basically used to add the special style to the element that are focused. The following example shows how to use the :focus class to change the color of the link when it is focused.
<html>
<head>
<style type="text/css">
a:focus {
color: #FF00FF
}
</style>
</head>
<body><a href="">INCLUDEHELP</a>
</body>
</html>
6. :first-child
This class is basically used to add special style to the element that is the first child of another element.
<html>
<head>
<style type="text/css">
div >p:first-child {
text-indent: 25px;
color: #FF00FF;
}
</style>
</head>
<body>
<div>
<p>Here INCLUDEHELP is intendent</p>
<p>Here INCLUDEHELP is not indented</p>
</div>
<p>But this will not change the paragraph in HTML document:
</p>
<div>
<p>Here INCLUDEHELP will not be effected.
</p>
</div>
</body>
CSS Tutorial & Examples »