htmlcsscss-selectors

What is the mouse down selector in CSS?


I have noticed that buttons and other elements have a default styling and behave in 3 steps: normal view, hover/focus view and mousedown/click view, in CSS I can change the styling of normal view and hover view like this:

button{
  background:#333;
  color:#FFF;
}

button:hover{
  background:#000;
  color:#EEE;
}

but how can I select the mousedown? I want something like this:

button:mousedown{
  //some styling
}

thanks


Solution

  • I think you mean the active state

    button:active{
      //some styling
    }
    

    These are all the possible pseudo states a link can have in CSS:

    a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
    a:hover {color:#FF00FF;}   /* mouse over link */
    a:focus {color:#0000FF;}   /* link has focus */
    a:active {color:#0000FF;}  /* selected link */
    a:visited {color:#00FF00;} /* visited link */
    

    See also: http://www.w3.org/TR/selectors/#the-user-action-pseudo-classes-hover-act