Trick Question: How many link states can be defined in CSS?

Hint: There is more than one correct answer (well, sort of). I would fail 4 and pass 3 of them, while 2 of the 3 correct answers would get extra points (because it’s rare knowledge).

  1. 1
  2. 2
  3. 4
  4. 5
  5. 8
  6. 16
  7. 20

1

Wrong.
I hope, there’s no need to explain further.

2

Wrong.
This answer might be given by beginners who think there’s only a and a:hover.

4

Still wrong.
Although this answer might be given by most developers who think of :link, :visited, :hover, :active.

5

A good answer, but still wrong. (But I wouldn’t fail this one.)
The one missing state from the 4 above is :focus. Professional web developers should always think about :focus for accessibility and usability reasons.

8

Nearly correct.
This might surprise most of you, as nearly all CSS tutorials, books and other resources only talk about the aforementioned 5. The reason why there are more states is not that any is missing from those 5. The problem is that they are two different kinds of states, which are styled differently with link pseudo-classes and dynamic pseudo-classes! A link is either visited or not visited, and, on top of that, a link is reacting to user interactions hover, active and focus. To make the difference clearer, ask yourself: How do you set a style to a visited link that is active?

All the 8 combinations are:

:link,
:link:hover,
:link:focus,
:link:active,
:visited,
:visited:hover,
:visited:focus,
:visited:active

In most cases web developers set link/visited and hover/active/focus to be the same. That makes sense, but from an usability and accessibility point of view, you might want to differentiate. At least you should think about it and, if you choose not to differentiate, you should make it a deliberate decision rather than forget about them.

16

Correct.
I wrote “nearly correct” to this answer of “8”, because you can also combine the dynamic pseudo-classes (link pseudo-classes are mutually exclusive, while dynamic pseudo-classes are not). This gives much more possibilities, i.e.

:link:hover:focus,
:link:hover:active,
:link:focus:active,
:visited:hover:focus,
:visited:hover:active,
:visited:focus:active,
:link:hover:focus:active,
:visited:hover:focus:active

Admittedly, they are a bit ridiculous in most cases (especially the last two).

20

Wrong.
I just put it there to confuse you. 😉

Further information

These articles are very old, but still relevant:

Tags: , , , ,


Leave a Reply