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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.16k
    Comment on it

    A pseudo-class is used to describe the state of an element by which it adds special effect to the selector.

    These effects can be added without using JavaScript.

    For e.g a style will be added to the selector when an element will be active by using :active. Pseudo class starts with colon(:) without whitespace.

    Here is the syntax of pseudo-classes:-

    selector:pseudo-class {
        property:value;
    }


    We can also bind the CSS classes with pseudo-classes.

    Below is the syntax:-

    selector.class:pseudo-class {
    property: value;
    }

     

    Here are some pseudo-classes:-

    • :link- Add style to the unvisited links.
    • :visited- Add style to the visited links.
    • :hover- Add style when we hover mouse over an element.
    • :active- Add style to an active element.
    • :focus- Add style to an element while having focus.

     

    1. :link:-

    <html>
       <head>
          <style type="text/css">
             a:link {color:red;}
          </style>
       </head>
       <body>
          <a href="">Unvisited link</a>
       </body>
    </html>

     

    2. :visited:-

    <html>
       <head>
          <style type="text/css">
             a:visited {color: black;}
          </style>
       </head>
       <body>
          <a href="">Visited link</a>
       </body>
    </html>

     

    3. :hover:-

    <html>
       <head>
          <style type="text/css">
             a:hover {color: blue;}
          </style>
       </head>
       <body>
          <a href="">Hover over the link</a>
       </body>
    </html>

     

    4. :active:-

    <html>
       <head>
          <style type="text/css">
             a:active {color: green;}
          </style>
       </head>
       <body>
          <a href="">Active link</a>
       </body>
    </html>

     

    5. :focus:-

    <html>
       <head>
          <style type="text/css">
             a:focus {color: maroon;}
          </style>
       </head>
       <body>
          <a href="">Focus over the link</a>
       </body>
    </html>

     

    Below is the link to explain the code properly:-

    https://jsfiddle.net/91whet1t/

     

 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: