擬似クラスにはいくつかありますが、Aタグに指定するときには次の順番で指定をしないと、他の指定により上書きされます。
- link
- 未アクセス
- visited
- アクセス済み
- hover
- マウスポインタが合わさっている状態
- focus
- 要素が選択された状態
- active
- クリックしている状態
これはCSSに段階化規則というものがあるためで、『ある条件に対して値を複数回指定すると、最後に指定されたものが有効になる』というルールによるものです。
aのみ | link | visited | hover | focus | active | |
---|---|---|---|---|---|---|
未アクセス | ○ | ○ | × | × | × | × |
アクセス済み | ○ | × | ○ | × | × | × |
マウスポインタが 合わさっている状態 | ○ | △ | △ | ○ | × | × |
要素が選択された状態 | ○ | △ | △ | × | ○ | × |
クリックしている状態 | ○ | △ | △ | × | × | ○ |
△についてはリンクが未アクセスかアクセス済みかによります。
focusはWindowsIE6以下には対応していません。
また、これ以外に:langがありますが、これはlinkより前に指定するようにします。
[参考記事] フォーカスをShift+Tabで移動するとアクティブが効かない
[参考記事] フロートされている画像をフォーカスで移動すると位置がずれる