Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 Pseudo-elements

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.49k
    Comment on it
    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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: