5

I‘m study CSS in the "w3schools", in the chapter of "link", they say:

"When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited a:active MUST come after a:hover"

I want to know why the correct order is L.V.H.A, not L.H.V.A or another.

Vayne
  • 61
  • 6

2 Answers2

8

Pseudo-classes must be declared in a specific order.

The mnemonic LoVe HAte is always useful for remembering the correct order:

:link
:visited
:hover
:active

Each pseudo-class corresponds to an event which can only happen later in the timeline than the one before.

That is to say:

  1. A link is unvisited before it is visited.

  2. A link is visited before it is hovered over.

  3. A link is hovered over before it is in active use.

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • so, as you said, is the right order is "l(exist).H(hovered over then click to visit).A(when i click, it is in active use).V(visited)"? – Vayne Dec 12 '15 at 13:12
  • Nearly. Any link you have not yet interacted with is either _unvisited_ (`:link`) or _visited_ (`:visited`)... when you start to interact with the link, first you _hover over it_ (`:hover`) and then you _click it_ (`:active`). – Rounin Dec 12 '15 at 16:24
4

The main reason why is because the latter rules execute after the previous ones found in a document in CSS in order, meaning that the behavior of the latter will be executed after all previous rules matched are executed. Therefore, their order does matter in order to avoid overlappings that will affect the behavior of each other.

If for example :link is put after :visited, some behavior of :visited will be overlapped, for example its color showing probably as a normal link despite visited.

Nick Louloudakis
  • 5,856
  • 4
  • 41
  • 54
  • Thank you for you answer. Now i can understand the order of "link" and "visited", "hover" and "active". Could you give me a explain and example of "visited" and "hover"? I think the correct order is"i hover over it then i visit it", isn't it? – Vayne Dec 12 '15 at 23:09