In CSS, you'll be able to apply styles to elements in these states
employing a special selector called a pseudo-class selector. It’s an
odd name, but you will consider like elements in an exceedingly certain
state belong to the identical class. However,
category name isn’t within the markup—it’s something the browser keeps track
of. So it’s kinda sort of a class…it’s a pseudo-class.
Pseudo-class selectors are indicated by the colon (:) character.
Most commonly used pseudo classes are explained below
1) :link
2) :visited
3) :hover
4) :active
5) :focus
6) :first-child
7) :lang
:link pseudo-class
An example of :link pseudo-class is given below with source code.
<
style
type
="
text/css
"
>
a:link
{
color
:
black
;
}
<
/style
>
<
a href=""
>
This is a link<
/a
>
Output of above code
:visited pseudo-class
An example of :visited pseudo-class is given below with source code.
<
style
type
="
text/css
"
>
a:visited
{
color
:
blue
;
}
<
/style
>
<
a href=""
>
This is a link<
/a
>
Output of above code
:hover pseudo-class
An example of :hover pseudo-class is given below with source code.
<
style
type
="
text/css
"
>
a:hover
{
color
:
red
;
background-color
:
lightgrey
;
}
<
/style
>
<
a href=""
>
This is a link<
/a
>
Output of above code
:active pseudo-class
An example of :active pseudo-class is given below with source code.
<
style
type
="
text/css
"
>
a:active
{
color
:
red
;
background-color
:
green
;
}
<
/style
>
<
a href=""
>
This is a link<
/a
>
Output of above code
:focus pseudo-class
An example of :focus pseudo-class is given below with source code.
<
style
type
="
text/css
"
>
a:focus
{
color
:
white
;
background-color
:
green
;
}
<
/style
>
<
a href=""
>
This is a link<
/a
>
Output of above code
:first-child pseudo-class
An example of :first-child pseudo-class is given below with source code.
<
style
type
="
text/css
"
>
div p:first-child
{
background-color
:
yellow
;
}
<
/style
>
<
div
>
<
p
>
This is para1 <
/p
>
<
p
>
This is para2 <
/p
>
<
/div
>
Output of above code
This is some text.
This is some text.
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.