CSS | Pseudo-classes

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. For Example, changing the style of an element when the user hovers over it, or when a link is visited. All of these can be done using Pseudo Classes in CSS.

Note that pseudo-class names are not case-sensitive.

Syntax:



selector: pseudo-class{
     property: value;
}

There are many Pseudo classes in CSS but the ones which are most commonly used are as follows:

  • :hover Pseudo-class: This pseudo-class is used to add special effect to an element when our mouse pointer is over it. The below example demonstrates that when your mouse enters the box area, its background color changes from yellow to orange.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>CSS transition-property property</title>
        <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 200px;
            margin: auto;
            font-size: 40px;
            text-align: center;
        }
      
        .box:hover{
            background-color: orange;
        }
      
        h1, h2{
            color: green;
            text-align: center;
        }
        </style>
    </head>
      
    <body>
        <h1>Geeks For Geeks</h1>
        <h2>:hover Pseudo-class</h2>
        <div class="box">
            My color changes if you hover over me!
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

  • :active Pseudo-class: This pseudo-class is used to select an element which is activated when the user clicks on it. The following example demonstrates that when you click on the box, its background color changes for a moment.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>CSS transition-property property</title>
        <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 200px;
            margin: auto;
            font-size: 40px;
            text-align: center;
        }
      
        .box:active{
            background-color: orange;
        }
      
        h1, h2{
            color: green;
            text-align: center;
        }
        </style>
    </head>
      
    <body>
        <h1>Geeks For Geeks</h1>
        <h2>:active Pseudo-class</h2>
        <div class="box">
            My color changes for a moment if you click me!
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

  • :focus Pseudo-class: This pseudo-class is used to select an element which is currently focussed by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it. In the following example, the background color of the input field which is currently focussed changes.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>CSS transition-property property</title>
        <style>
        form{
            width: 300px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            line-height: 2rem;
        }
      
        label{
            width: 30%;
        }
      
        input{
            background-color: default;
            float: right;
        }
      
        input:focus{
            background-color: grey;
        }
      
        h1, h2{
            color: green;
            text-align: center;
        }
        </style>
    </head>
      
    <body>
        <h1>Geeks For Geeks</h1>
        <h2>:focus Pseudo-class</h2>
        <form>
            <label for="username">Username:</label>
            <input type="text" name="username" 
                    placeholder="Enter your username" />
                      
            <label for="emailid">Email-Id:</label>
            <input type="email" name="emailid" 
                    placeholder="Enter your email-id" />
                      
            <label for="Password">Password:</label>
            <input type="password" name="Password" 
                    placeholder="Enter your password" />
        </form>
    </body>
    </html>                    

    chevron_right

    
    

    Output:

  • :visited Pseudo-class: This pseudo-class is used to select the links which have been already visited by the user. In the following example, the color of the link changes once it is visited.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>CSS transition-property property</title>
        <style>
        body{
            text-align: center;
        }
      
        h1, h2{
            color: green;
        }
      
        a:visited{
            color: red;
        }
        </style>
    </head>
      
    <body>
        <h1>Geeks For Geeks</h1>
        <h2>:visited Pseudo-class</h2>
          
        <p>
            <a href="https://www.geeksforgeeks.org/" target="_blank">
                My color changes once you vist this link
            </a>
        </p>
    </body>
    </html>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

I like solving puzzles

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.