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.

Bhuwan · Answer 1 · 2018-02-03T15:59:07.757

1

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;
}

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

edited Feb 03 '18 at 15:59

answered Feb 03 '18 at 11:05

Bhuwan

16,525
5
34
57

Interestingly, this doesn't work as you describe in Firefox. It does in Chrome and Edge. I wonder if Firefox just ignores the color: yellow declaration because it sees that a transition to color: green is about to take place (even though the transition is delayed). Naturally, changing color to a different property, like background-color, in either :active or :focus causes it to work as described in all browsers. – BoltClock Feb 03 '18 at 12:49
@BoltClock yeah its not working on firefox....even if I remove the `:focus`, `:active` is not working on firefox – Bhuwan Feb 03 '18 at 16:06

john c. j. · Accepted Answer · 2018-02-03T12:42:13.807

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>

Is there a reason you didn't just post this as an answer to the other question? Surely you'd want others looking at that other question to see your take on it, right? — BoltClock, Feb 03 '18 at 12:44
@BoltClock I think, it will be a bit kludgy, because my answer is closely related to *my* question (instead of "other" question"). From my point of view, it would be better to link it as comment, isn't it? — john c. j., Feb 03 '18 at 12:52
Alright, I reread your question and I see where you're coming from now. — BoltClock, Feb 03 '18 at 12:53

Relationship between active and focused states

2 Answers2

Linked