概要
自分用の覚え書きです。
:visited{}
既にクリックしたリンク状態に対して記述できる。
example
a:visited {
color:red;
}
だと、クリック済みのリンクの色が変わる。
昔ながらのWebサイトを思い出すと、リンクを踏むと青から紫になるのが当たり前だったのでイメージが容易につく。が、今はreset.cssなどでリセットしちゃうので存在を忘れがち。ブログではやっぱり役に立ちそうなのでちゃんと設定することを心がけようっと。
:focus{}
以下の状態に対して記述できる。
- タッチデバイスで触れている要素
- Tab キーでフォーカスが当たった要素
example
a:focus {
color: red;
}
とすると要素を触れる・Tabキーフォーカスされると文字色が変わる。
Tabキーは業務系だとバリバリ使うので気を抜けない。formの入力とかね。
タッチデバイスも言わずもがな。
リンクに限らず、チップス・注意書き等、なにか動きを出したい時には
- :hover {}
- :focus {}
の組み合わせは使いそうですなー
追記：
実際に組み合わせた例..