自分用のメモとして、この記事を残します
今回はcssの疑似クラス:link:visited:hover:active:focus
について記事にしたいと思います
:link
未訪問のリンクのスタイルを指定します
一番基本的な設定なので、他の疑似クラスよりも先に宣言することをお勧めします
一般的には:link⇒ :visited⇒ :hover⇒ :active⇒ :focus
の順番で宣言することをお勧めします
例
link
a:link{color:#0000ff;}:visited
既に訪問されている(クリックされている)リンクの状態を表現するものです
例
visited
a:visited{color:#ffa500;}:hover
マウスをリンクやボタン等の上に置いた時の状態を表現するものです
例
hover
a:hover{color:#ff0000;}:active
リンクやボタンなどがアクティベート(活性化)された時の状態を表現するものです
リンクやボタンを押し始める時と離す時の間の状態を表現するものです
例
active
a:active{color:#800080;}:focus
HTMLエレメントをクリックした時、タッチデバイスでタップした時、キーボードのtabキーで移動した時などの表現をするものです
例えばHTMLで作ったボタンをクリックした時に色を変えたい場合などに用います
例
focus
a:focus{color:#008000;}まとめ
少しややこしいですが便利なので使いこなせるようになりたいです
以上メモでした