皆さんは「リンク」に付ける疑似クラスって、ちゃんと覚えてますか？
私は、「:hover」以外は、忘れがちです！今回はそんな疑似クラスについて、一度見直してみようと思い、まとめてみました。ちなみに、疑似クラスは英語で「pseudo-class」というらしいです。pseudo の読み方は、スードォ（weblio）。
「リンク」の疑似クラスは
主に４種
リンク（a 要素）には、主に４種類の擬似クラスを付けることができます。
割とハマりがちなトラブルなので先に書きますが、:link、:visited 疑似クラスによって定義されたスタイルは、ユーザー操作の疑似クラス（:hover、:active）によって上書きされる可能性があります。
ですので、
CSS で a 要素に疑似クラスをつける場合は、LVHA順（:link – :visited – :hover – :active）に記述するの推奨されます。（指定しない疑似クラスは省いて問題ありません。）
※以下は個人的によく使うと思う順番に書いており、LVHA順ではないのであしからず。
:hover
カーソルをリンクの上に重ねたときのスタイルを指定することができます。
（MDN Web Docs）
この疑似クラスはよく使うので、調べなくても頭に入っているよっ！って人が多いと思います！
:visited
ユーザーが一度訪れたことがあるリンクのスタイルに適用させることができます。
（MDN Web Docs）
訪れているかどうかの判定は、ブラウザのキャッシュ(履歴)に依存するようです。
要注意
プライバシー上の制約により、「:visited」疑似クラスを使って適用できるスタイルには厳しい制限がかけられています。
理由としては、制約無く「:visited」疑似クラスを悪用すると、ブラウジング履歴の漏洩やターゲット広告やフィッシング攻撃などの悪意ある行動を可能にしてしまう場合があるためです。
詳しい内容などは、MDNのこちらのページで紹介されているのでぜひ一度目を通してみてください！
:link
まだ訪れていないリンクのスタイルを指定することができます。
（MDN Web Docs）
単純に何もしていない状態ですね。
:active
ユーザーによってアクティブ化されている（マウスダウン～）リンクのスタイルを指定することができます。
（MDN Web Docs）
ふだん見逃しがちですが、クリックした状態にすると変化が確認できるかも！？
その他にも :forcus 疑似クラスなどありますが、フォームとかで使用するものみたいなので、今回は割愛します。
「リンク」の
デフォルトのスタイル
何もスタイルを指定しないデフォルトのリンクは、色が青色。のイメージですよね！
それとアンダーライン（text-decoration: underline;）がついていて、カーソルがポインター（cursor: pointer;）に変化する。というイメージですよね。
訪問済み（:visited）は紫色のイメージですが、何気にマウスダウン（:active）で赤色に変化していたりするようです（意識していないと見逃しがち！）。
また、
「リンク」のデフォルトのスタイルは各ブラウザに依存しているので、みんながみんな一概にこのようにイメージしているとは限りませんが、結構このイメージで通じるのではないかなぁと思っています。
なので、青＝リンクというのは、デザインとしては伝えやすいのかなぁと思います。
疑似クラスを使った
「リンク」の基本的なスタイル
疑似クラスを使った「リンク」の基本的なスタイルをまとめてみました。
テキストの色
color プロパティで変更することができます。
a:link { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #0000ee; }
a:active { color: #ff0000; }#～ の部分を任意の値に変更すればよいですね。（なお、上記のカラーコードは Chrome ブラウザのデフォルトのものを参考にしています。ブラウザによっては違います。）
また、色の指定として、
a:hover { color: rgba(0,0,255,0.5); }のように透明度の指定をすることも可能ですが、:visited に関しては前述のとおりプライバシー上の制約によりスタイルを適応させることができない場合もあります。
アンダーライン
text-decoration プロパティで変更することができます。
a: { text-decoration: none; }
a:hover { text-decoration: underline; }こちらは、元々のセレクタ（この場合は a）に対してスタイルを指定して、マウスオーバー（:hover）でアンダーラインを表示させるように指定するのが良いかと思います。
ちなみに text-decoration はアニメーション（transition）に対応していないので、他の方法でやるしかありません。（私は、初心者のころはこういうところで苦戦してました；；）
まとめ
リンクで使える疑似クラスは :link、 :visited、:hover、:active で、LVHA順で記述します。
恥ずかしながら順番があるとは知りませんでした。。
今回、疑似クラスを調べるにあたり W3C のページを探してみたのですが、「MDN Web Docs」のページにリンクしていたので、参考文献として載せています。Web 業界のソースのがまだよくつかめてません。。一応、本記事で調べた疑似クラスの一覧は W3C wiki にあったので、メモとして掲載しておきます。https://www.w3.org/wiki/CSS/Selectors ←こちらの記事の任意のリンクをクリックすると MDN のページにたどりつく感じ。
出典・参考文献
・weblio. 「Pseudo」. https://ejje.weblio.jp/content/pseudo, 2024年4月14日閲覧。
・MDN Web Docs. 「Pseudo-classes」. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes, 2024年4月14日閲覧。
