What is the difference between :focus and :active?

Question

What is the difference between the :focus and :active pseudo-classes?

Answer 1

:focus and :active are two different states.

• :focus represents the state when the element is currently selected to receive input and
• :active represents the state when the element is currently being activated by the user.

For example let's say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give "focus" to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.

On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.

An example:

<style type="text/css">    button { font-weight: normal; color: black; }    button:focus { color: red; }    button:active { font-weight: bold; }  </style>      <button>    When clicked, my text turns red AND bold!<br />    But not when focused only,<br />   where my text just turns red  </button>

edit: jsfiddle

Answer 2

:active       Adds a style to an element that is activated :focus        Adds a style to an element that has keyboard input focus :hover        Adds a style to an element when you mouse over it :lang         Adds a style to an element with a specific lang attribute :link         Adds a style to an unvisited link :visited      Adds a style to a visited link 

Source: CSS Pseudo-classes