フェノメナの開発担当のレミです！
今回はCSSでよく使われる擬似クラス:link, :visited, :hover, :active, :focusの使い方について解説します。
上記の擬似クラスは「states」（状態）を表現する擬似クラスになります。どういう意味かと言いますと、ユーザアクションに関連する擬似クラスだということです。
a:link {}
:link 擬似クラスはリンクのデフォルトの状態を意味しているものです。一番基本的な設定なので、他の擬似クラスよりも先に宣言することをお勧めします。
一般的に勧められてる宣言の順番がこの通りです ⇨ :link, :visited, :hover, :active, :focus。
例 :
a:link {
color: blue;
}
a:visited {}
:visited擬似クラスは既にクリックされている（訪問されている）リンクの状態を表現するものです。
例 :
a:visited {
color: orange;
}
a:hover {}
:hover擬似クラスはマウスをリンクの上に置いた時の状態を表現するものです。
リンクには限定されないが、一般的なユースケースがリンクになります。
例 :
a:hover {
color: red;
}
a:active {}
:active擬似クラスはリンクがアクティベート（活性化）された時の状態を表現するものです。
リンクに限定はしないが、一番主流でわかりやすいのがリンクになります。リンクの場合は、リンクを押し始める時と、離す時の間の状態になります。
a:active {
color: purple;
}
a:focus {}
:focus擬似クラスは HTMLエレメントにフォーカスが行った時の状態を表現するものです。
フォーカスというのは、タッチデバイスでタップした時や、キーボードのtabキーで移動した時などになります。
基本的にはform関連のエレメントに使われるがリンクにも使用できます。
a:focus {
color: yellow;
}
よく混乱してしまう擬似クラスの使い方を少し理解できたでしょうか？
では、また次回も別の擬似クラスについて解説します。