CSS3 Pseudo-elements

Hello readers !

In this blog i'll explain what is Pseudo-elements and how can we use it.

What is pseudo-classes ?

- Pseudo-classes are some special classes which are used to for special effect.
You can also use it with css class.
For example:-

selector:pseudo-element {property:value;}
There are some example of pseudo-element

:visited - (eg- a:visited)You can select all visited anchor tag

:link - You can select all unvisited anchor tag

:hover - You can select mouse over anchor tag

:active - You can select active anchor tag

:focus - You can select input element which one is focused

:first-line - (eg- p:first-line)- You can select first line of all paragraph

:first-letter (eg- p:first-letter)- You can select first letter of all paragraph

:first-child - (eg- li:first-child)- You can select first child of its parent

:after - (eg- li:after)- You can add some content after all lis.

:before - (eg- li:before)- You can add some content (as image also) before all lis.

:lang(language) - You can select every element with same lang attribute
Some other example of pseudo-element

element:nth-child(an + b) { style properties }

tr:nth-child(even) - You can select the even rows of a HTML table.

tr:nth-child(odd) - You can select the odd rows of a HTML table.

tr:nth-child(2n) - You can select the even rows of a HTML table.

tr:nth-child(2n+1) - You can select the odd rows of a HTML table.

span:nth-child(0n+1) - You can select a span element which is the first child of its parent;

this is the same as the :first-child selector.

span:nth-child(1) - You can select Equivalent to the above.

span:nth-child(-n+3) - Matches if the element is one of the first three children of its parent

and also a span.

For such more Blogs you can visit to http://findnerd.com/NerdDigest