Relationship Between Active And Focused States

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

Solution 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:

<ahref="#">
    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:

<ahref="#">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>

Solution 2:

There is no difference between those two examples...

The :active state works when you clicked on the element...

...:focus works after you clicked the element...

If you see closely, when you click the <a>, it becomes yellow first and then it will become green...

Add some transition delay in the :focus...you will know the rest

Stack Snippet

a:link {
  color: blue;
}

a:visited {
  color: voilet;
}

a:active {
  color: yellow;
}

a:focus {
  color: green;
  transition: all .3s ease 2s;
}

<ahref="javascript:void(0)"target="_blank">Google</a>

Share