状態系の擬似クラスについて
擬似クラスとは、選択された要素に対して特定の状態を指定するときに使います。
よく使われるもので:hover擬似クラスでがあります。これはユーザーがマウスカーソルを要素に当てたときにその要素のスタイルを変更することができます。
ここではlink系でよく使われる擬似クラスを紹介しておきます。
よく使われるもので:hover擬似クラスでがあります。これはユーザーがマウスカーソルを要素に当てたときにその要素のスタイルを変更することができます。
ここではlink系でよく使われる擬似クラスを紹介しておきます。
:link
:link擬似クラスは、未訪問時の要素のスタイルを設定します。 <a>, <area>, <link> など、 href 属性を持つ未訪問のすべての要素で利用することができます。
:active
:active擬似クラスは、ユーザーによってアクティブ化されている要素を表します。
アクティブ化と言われてピンとこないと思いますが、指定した要素をクリックしたときの設定をすることができます。
ですが、残念なことにクリックした瞬間リンクであれば移動先への移動が始まってしまいますので変化がわかりにくくあまり使われないように思います
:hover
:hover擬似クラスはユーザーが要素にマウスカーソルを当てたときにその要素のスタイルの変更を設定することができます。
よく使われるのはリンクになっている部分だと思います。
マウスカーソルが乗った時にクリックできるよ!とアピールするのにもってこいだと思います。
スマートフォンでhoverは使えませんので注意
:visited
:visited擬似クラスは、ユーザーがすでに訪問したリンクのスタイルを設定することができます。
プライバシー上の理由ということで、このセレクターを使用して変更できるスタイルはとても限定されています。
ユーザーが同じリンクを間違えて踏まないような工夫ができますね
注意点
これら擬似クラスによって設定したスタイルはリンク関連の擬似クラスによって上書きされてしまう可能性があります。
適切にリンクにスタイルを細かく適用するには、
LVHA順
① :link
② :visited
③ :hover
④ :active
の順番で定義されるように記述をしましょう。
:focus
:focusはTABキーなどで選択されたときにかかる指定マウスカーソルを使わない派の人のために設定しておくと良いでしょう
上で紹介している順番にねじ込むのであればhoverのあとあたりでしょうかね?
新しいのでこの手の順番では忘れられがちです