What is the difference :focus and :active?

Question

What is the difference :focus and :active?

Answer 1

:focus is when an element is able to accept input - the cursor in a input box or a link that has been tabbed to.

:active is when an element is being activated by a user - the time between when a user presses a mouse button and then releases it.

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

Answer 3

:focus and :active are two different states.

:focus represents the state where the element is the element current selected to receive input from input devices (keyboard). :active represents the state where the element is currently being activated by the user.

Let's put that into perspective with an example. Let's say we have a <button>. The <button> will not have any state to being 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 down (:active) state.

On that note, when you click on an element, you also give it focus also, which gives the allusion 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, where my text just turns red
</button>