Relationship between active and focused states

Question

Currently I'm trying to understand how :active and :focus pseudo-classes related with each other.

Here is my example:

<a href="http://google.com" target="_blank">Google</a>

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:active  { color: yellow; }
    a:focus   { color: green;  }
</style>

If you click on the link, you will see that it's color changed from blue/violet to green. You will not see active state, i.e. yellow.

Then, lets try to remove a:focus from our CSS:

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:active  { color: yellow; }
</style>

Now, when we click on the link, it's active state is successfully visible. I.e., the link's color changed from blue/violet to yellow, for a 1 second.

I don't ask about difference between :active and :focus pseudo-classes - sure, I know it.

My question is about WHY we don't see :active state (yellow) in the 1st example.

Answer 1

Simply saying, when you click on the link, both active and focus states are triggered. For that reason, if you want to see both active and focus states, active must be located below focus:

<a href="#">
    You will see both active and focus states
</a>

<style>
    a:focus   {
                color: green;
                margin-left: 20px;
    }

    a:active  {
                color: yellow;
                background-color: black;
    }

    /*
    Click on the link, but don't release mouse button.
    You will see, that the link have:
    - yellow text on black background
    - indent

    Then, release mouse button.
    You will see, that the link have:
    - green text
    - indent

    That's fine!
    */
</style>

Note, that active must be located below focus, as I already said. If you try to change the order, you will not see yellow text - it will be always green, because of overwriting focus over active. Let's show an example:

<style>
    /* Incorrect: */

    a:active  {
                color: yellow;
                background-color: black;
    }

    a:focus   {
                color: green;
                margin-left: 20px;
    }
</style>

Related question/answer: What is the difference between :focus and :active? (However, from my point of view, my answer is easier to understand).

Edit:

And so, returning to my original example, it was necessary just change the order of active and focus lines:

<a href="#">Test me</a>

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:focus   { color: green;  }
    a:active  { color: yellow; }
</style>