Pseudo-Classes


pseudo classes allow the users to apply different style to the elements such as buttons,hyperlinks and so on.


List the different states of the element


A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class
{
property: value;
}


class Description
:active Defines a different style to an element that is activated by the user.
:hover Defines a different style to an element when the mouse pointer is moved over it.
:link Defines a different style to an unvisited link
:visited Defines a different style to an visited link
:lang It is used to define a language to use in a specified element.
:focus It selects the element which is focused by the user currently.
:first-child It adds special effects to an element, which is the first child of another element.


<html>
<head>
<title>CSS</title>
<style>
a:visited
{
color:green;
}
a:hover
{
color:aqua;
}
a:unvisited
{
color:yellow;
}
a:link
{
color:pink;
}
p:lang(abc)
{
font-family:Verdana;
color:blue;
}
h1:first-child
{
text-indent: 200px;
color:blue;
}
</style>
</head>
<body>
<div class="a1">
<a href="https://www.google.com">Click the link to see the result</a>
</div>
<p>Without :lang pseudo class</p>
<p lang="abc">With :lang pseudo class with the value abc</p>
<div>
<h1>It is the first heading in div. It will be indented, and its color will be blue</h1>
<h1>It is the Second heading in div, which will not be affected</h1>
</div>
</body>
</html>