Where to put focus pseudo-selector

Question

It is widely known that pseudo-classes for links should follow LoVe-HAte rule:

a:link
a:visited
a:hover
a:active

But what is the correct place to put a:focus pseudo-selector? There are two possible variants, from my point of view - before and after :hover. I want to know what way is correct.

var. 1        var. 2

a:link     |  a:link
a:visited  |  a:visited
a:focus    |  a:hover
a:hover    |  a:focus
a:active   |  a:active

A small note: On the internet, I already have seen that someone says to put it before :hover. On the flip side, from time to time someone else says it should be located after :hover. But in all such cases the reasons were not discussed. Or, sometimes, the reasoning was too hard to understand.

Answer 1

Well first off :focus is mostly aimed to input elements and limited to the following (taken from this great SO post):

There isn't a definite list, it's up to the browser. The only standard we have is DOM Level 2 HTML, according to which the only elements that have a focus() method are HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. This notably omits HTMLButtonElement and HTMLAreaElement.

So while totally valid to search for some "reasoning" behind it, I'd say it all comes down to the fact that it will work on any order anyways, therefore it would be kind of useless to establish a standard, even theoretically.

Considering the other pseudo classes note that :hover must come after :link and :visited in the CSS definition to work effectively because you can reach either :link or :visited states without even hovering first, but to reach :active state you would have hovered first, hence :active must come after :hover.

When you :focus it's like a mix of click, active, hover all in one, so it's behavior depth already makes it unique to the rest of "partial" behaviors from other pseudo classes which would require an order.

Here a snippet placing :focus 1st to last on most :focus friendly elements (<button> not one of them):

/* placed 1st */
input:focus {background: limegreen;}
input:link {color: red;}
input:visited {color: green;}
input:hover {color: hotpink;}
input:active {color: blue;}
button:link {color: red;}
/* placed 2nd */
button:focus {background: limegreen;}
button:visited {color: green;}
button:hover {color: hotpink;}
button:active {color: blue;}
a:link {color: red;}
a:visited {color: green;}
/* placed 3rd */
a:focus {background: limegreen;}
a:hover {color: hotpink;}
a:active {color: blue;}
select:link {color: red;}
select:visited {color: green;}
select:hover {color: hotpink;}
/* placed 4th */
select:focus {background: limegreen;}
select:active {color: blue;}
textarea:link {color: red;}
textarea:visited {color: green;}
textarea:hover {color: hotpink;}
textarea:active {color: blue;}
/* placed last */
textarea:focus {background: limegreen;}

<textarea name="" id="" cols="30" rows="10"></textarea><br>
<select name="" id="">
  <option value="a">first</option>
  <option value="b">second</option>
</select>
<input type="text"><br>
<a href="#">Anchor link</a><br>
<button type="text">Click Me</button>

Answer 2

You could make an argument for either case, but I would say that variant 2 makes more sense - a:link, a:visited, a:hover, a:focus, a:active.

If we go from a link to active, we are going from less intent to more intent. Focus implies a bit more intent than hover does, since a focus means that the next action taken (such as an enter key press) applies to that element. A hover merely indicates a sort of flirting interest if you will. A user may hover their cursor all over a page as they move their cursor around, but when they actually enter into a textbox (focus), that implies a far greater degree of intent.

Additionally, you can't progress to active without first reaching the focus state. Let's take a submit button - to trigger a submit, a) the user may tab to the submit button and press enter or b) the user may simply click on the submit button. In case (a) the user first focuses on the submit button when they tab to it, and then activates it by pressing enter (no hover in this case). In case (b) the user hovers over the button, and then clicks - upon click the button ultimately goes to the active state, but the browser also fires any event handlers attached to focus.

The idea of ascending intent doesn't apply as clearly to link vs visited - in this case I would argue that visited is mostly a variant of link. Nevertheless, visited does imply some greater degree of intent as it indicates an action (click or page visit) that was previously taken, and would perhaps more likely be taken again. Even if you don't agree with this logic, if you think of link as the base, and visited as a variant of link, it would still make sense to include visited (the variant) after link (the base).