Pseudo class in CSS

Written By:-Avinash Malhotra

Our Website:- Tech Altum

Pseudo classes are used to add some special effects to some selectors.

Pseudo class for anchor:

An anchor tag has following pseudo classes:

1. a:link
2. a:visited
3. a:active
4. a:hover

a:link
 When an anchor tag is a link( href tag is used), text color will becomes blue automaticly
For Example
LINK
we can also chane the color of link, for example
LINK WITH COLOR RED AND N0 UNDERLINE
Way to write CSS
a:link{ color:red; text-decoration:underline}


a:visited
When an anchor tag is clicked onced, its color automatically changes from blue to purple.
For Example, click following link once, color will change from blue to purple
VISITED
we can also chane the color of visited, for example
ACTIVE WITH COLOR GRAY AND N0 UNDERLINE
Way to write CSS
a:visited{ color:purple; text-decoration:underline}

a:active
active means when we click on that link, it will not work when click is over
For example, when we click a anchor tag, it color change to red, which is by default
ACTIVE
we can also change color of link, for example
LINK WITH A ACTIVE COLOR RED
Way to write CSS
a:link{ color:red, }

a:hover
Hover is a mouse over event; it will work when mouse is over that tag.
For Example, hover mouse on following link, color will change from blue to green.
HOVER
Way to write CSS
a:hover{ color:green}

Pseudo Class for tags
Other pseudo class

1. p:first-child                           Used to select first child of parent element
2. p:first-line                             Used to select first line of the para.
3. p:first-letter                           Used to select first letter of the word. 
4. p:before                                Used to insert content before every p tag
5. p:after                                   Used to insert content after every p tag
6. input[type="text"]:focus            When the text field is active
         This box will turn blue on focus.

To write content before p tag, write following css,
p:before{ content:"No-"}, now  "No-" will be added before every p tag.