リンクの装飾と擬似クラス

リンク（a要素）に様々な装飾をすることを指定できる、擬似クラス。

◉ a 要素の装飾を見てみる。

 ⚫︎ a                  全てのリンク

⚫︎ a:link　　  未訪問のリンク

リンクのデフォルトの状態を意味する。

 ⚫︎ a:hover　 リンクにカーソルが重なっている時

マウスをリンクの上に持っていくと:hover擬似クラスによって

リンクの色が変わる。

⚫︎ a:active　リンクをクリックしている時

リンクの上でマウスをクリックすると、マウスをクリックし始めてからマウスを離すまで:active擬似クラスによってリンクの色が変わる。

 ⚫︎ a:visited    既に訪問済みのリンク

未訪問のリンクに対しては文字の色として緑色が設定されているとき、

1番目のリンク先へ一度移動してから再度同じWebページを表示してみる。

訪問済みのリンクに対して、1番目のリンクの色が変更されている。

 ⚫︎ a:focus　 リンクにフォーカスしている時（tabキーで移動）

tabキーなどで移動しているときに、そのリンクを選んだ際に、

色が変わる。

一般に勧められている宣言の順番がこの通り

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