What is mouse down selector in CSS ?

Last Updated : 09 May, 2023

In this article, we are going to learn about the mouse-down selector in CSS. The mouse-down selector means the method to detect whether the primary mouse button is clicked or not. In CSS, the function of the mouse-down selector is done by the active pseudo-class. We can add this pseudo-class to the selector of the element to add the mouse-down selector’s function.

active: This is a pseudo-class that is used to represent a user-activated element. When using a mouse, “activation” is usually initiated by pressing the primary mouse button. On <a> and <button> elements, this pseudo-class is often utilized.

Example: In this example, we are using the above-explained approach, in which the color of the text of the anchor tag is changed.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
 
    <style>
        .click {
            color: green;
            margin-left: 4rem;
            margin-top: 3rem;
            font-size: 2.5rem;
            font-weight: semi-bold;
        }
 
        .click:active {
            color: red;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green; 
               margin: 2rem;">
        GeeksforGeeks
    </h1>
 
    <h3 style="margin: 2.2rem; 
               margin-top: -2rem">
        What is the mouse down selector in CSS ?
    </h3>
 
    <p style="margin: 2.2rem; 
              margin-top: 2rem; 
              font-size: 1.5rem">
        To change color to red:
    </p>
 
    <a class="click">Click on me!!</a>
</body>
</html>

Output:

Example 2: In the below code, multiple properties are changed when the element is “clicked”.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
 
    <style>
        .click {
            color: green;
            margin-left: 6rem;
            margin-top: 3rem;
            font-size: 2.5rem;
            font-weight: semi-bold;
        }
 
        .click:active {
            color: white;
            background-color: black;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green; 
               margin: 2rem;">
        GeeksforGeeks
    </h1>
     
    <h3 style="margin: 2.2rem; 
               margin-top: -2rem">
        What is the mouse down selector in CSS ?
    </h3>
     
    <p style="margin: 2.2rem; 
              margin-top: 2rem; 
              font-size: 1.5rem">
        To change background to black 
        and color to white: 
    </p>
     
    <a class="click">Click on me!!</a>
</body>
</html>