1990年代から2000年代のいわゆるCSSの黎明期の頃には、CSSで使う構文も少なく、覚える量もそれほど多くなかったために、学習コストは今よりも非常に小さいものでした。
しかし、時代が進むにつれ、CSSでできることも非常に幅広くなり、それに合わせてCSSでさえ難しく感じてしまう人が増えてしまったのではないかと思います。

当初は「:hover」や「:active」といった代表的な擬似クラスだけを使っていけばよかったものの、今では様々な擬似クラスがあるので、初心者の方はもちろんのこと、ベテランの方であっても、CSSの擬似クラスを学び直したいと思っている方は多いはずです。

そこで本稿では、「CSS擬似クラス」について改めて理解を深めていくための基本事項をおさらいしていきます。
CSSの擬似クラスは、さまざまな仕様変更や勧告を経て、現在のものになっています。
擬似クラスを使いこなせれば、特定のオブジェクトだけをデザインしたりすることが思い通りになるので、ぜひここでおさらいをしておきましょう。

CSSの「擬似クラス」って？

CSSの擬似クラスは、セレクタ(記述している要素やクラスなど)に付加するコロン(：)付きのキーワードのことです。

element.class:pseudo-class {
　　property: value;
}

擬似クラスを使えば、セレクタに対して、特定の状態を指定することができます。

例えば、:hover擬似クラスであれば、選択した要素上にマウスカーソルがあるときに、文字色を変えたり、大きさを変えたりすることができます。
以下の例では、リンクがマウスカーソルに乗ったら、ディープピンクに変わるという挙動を表しています。

a {
　　color: blue;
}
a:hover {
　　color: deeppink;
}

擬似クラスを使えば、:visitedのように閲覧履歴の状態、:checkedのようにコンテンツの状態、:hoverのようにマウスカーソルの位置状態といった外的要因との関係についてスタイルを適用したり、*:nth-child()*のようにコンテンツの配列順序に関してスタイルを適用したりすることが可能です。

リンクの状態に関する擬似クラス

入門としてよく引き合いに出されるのが、リンクに関する擬似クラスです。
擬似クラスを使うことで、訪問済みのリンクやアクティブなリンクの色を変えたりさまざまなスタイルを付加・変更することができます。

a:link {…}

a:visited {…}

a:hover {…}

a:active {…}

a:focus {…}

意外と正しく理解されていないことが多いですが、:linkは、aタグのうちhref属性が付与されているものにスタイルを加えます。
例えば、以下のようにhref属性がないものは*:link*の対象ではありません。

<a>href属性がありません</a>

:visitedは訪問済みリンクに対して、:activeは今まさにクリックしたリンクに対してスタイルを適用します。
:hoverはマウスカーソルが上に乗っかった(ホバーした)状態のときにスタイルが適用されますが、現在ではリンク以外でも利用できます。
また、:focusはtabキーなどでリンクのフォーカスを移動した場合に適用されるスタイルを指定します。

:linkや*:visited*、:activeは同時に起こりうる可能性がありますが、その場合はブラウザごとに返される処理が変わることを留意しておきましょう。