CSS Pseudo-classes

 

CSS pseudo-classes are used to give some special effects to some selectors.
There are various CSS pseudo-classes element.

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
:first-child	p:first-child	Selects every elements that is the first child of its parent
::before	p::before	Insert content before every element
::after	p::after	Insert content after every element
:lang(language)	p:lang(it)	Selects every element with a lang attribute value starting with "it"

One Exaple for matches the first <i> element in all <p> elements by using first child selector.

I am a cool man. I am not a angry man.
I am a cool man. I am a angry man.

HTML Content

    I am a cool man. I am not a angry man.


I am a cool man. I am a angry man.

CSS Content

p > i:first-child {
    color: blue;
}