[css3.svg]CSS3 - Pseudo classes - Dynamic


A link that been visited.

  a:visited {
      background-color: red;

  <a href="visited.html">Click to visit</a>


The mouse is over the element.

  .button:hover, .a:hover {
      outline: 1pt solid blue;
Hover me Link

  <button>Hover me Button</button>
  <a href="#">Hover me Link</a>


The element is being clicked.

  .button:active, .a:active {
      background-color: green;
Click and Hold

  <button>Click and Hold</button>
  <a href="#">Click and Hold</a>


The element has the keyboard focus.

  .button:focus, .a:focus {
      background-color: violet;
Focus me Link

  <button>Focus me Button</button>
  <a href="#">Focus me Link</a>

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath