A pseudo-class is used to describe the state of an element by which it adds special effect to the selector.
These effects can be added without using JavaScript.
For e.g a style will be added to the selector when an element will be active by using :active. Pseudo class starts with colon(:) without whitespace.
Here is the syntax of pseudo-classes:-
selector:pseudo-class {
property:value;
}
We can also bind the CSS classes with pseudo-classes.
Below is the syntax:-
selector.class:pseudo-class {
property: value;
}
Here are some pseudo-classes:-
- :link- Add style to the unvisited links.
- :visited- Add style to the visited links.
- :hover- Add style when we hover mouse over an element.
- :active- Add style to an active element.
- :focus- Add style to an element while having focus.
1. :link:-
<html>
<head>
<style type="text/css">
a:link {color:red;}
</style>
</head>
<body>
<a href="">Unvisited link</a>
</body>
</html>
2. :visited:-
<html>
<head>
<style type="text/css">
a:visited {color: black;}
</style>
</head>
<body>
<a href="">Visited link</a>
</body>
</html>
3. :hover:-
<html>
<head>
<style type="text/css">
a:hover {color: blue;}
</style>
</head>
<body>
<a href="">Hover over the link</a>
</body>
</html>
4. :active:-
<html>
<head>
<style type="text/css">
a:active {color: green;}
</style>
</head>
<body>
<a href="">Active link</a>
</body>
</html>
5. :focus:-
<html>
<head>
<style type="text/css">
a:focus {color: maroon;}
</style>
</head>
<body>
<a href="">Focus over the link</a>
</body>
</html>
Below is the link to explain the code properly:-
0 Comment(s)