疑似クラスとは?擬似要素との違いや使い方の注意点も解説

CSSを学び始めて少しすると見聞きするようになる「擬似クラス」。:hoverのような擬似クラスは分かりやすく使いやすいため、知っている人も多いでしょう。では、そもそも疑似クラスが何をするためのもので、使うことにどのようなメリットがあるのかを説明できるでしょうか。

本記事では疑似クラスの意味と役割や「擬似要素」との違い、そしてよく使われる疑似クラスも紹介します。また疑似クラスを使う際の注意点も説明するので、本記事を読むことで今まで以上に効果的に使えるようになるでしょう。

擬似クラスとは

擬似クラスとは、要素が特定の状態にあるときにスタイルを指定できるセレクタです。「特定の状態」というのは、「要素の上にポインターがある時」などのユーザーの動きに対応したものや、「親要素の中の〇番目の要素」のように、20種類以上の指定が可能です。使い方はセレクタの後に「:擬似クラス名」を追加するだけです。

疑似クラスの大きなメリットは、1つはデザインに幅を持たせることができる点と、もう1つはサイトのユーザビリティを高めることができる点にあります。

後で紹介しますが、疑似クラスには「訪問済みのリンク」と「未訪問のリンク」などの状態でスタイルを分けることもできます。これを使えば、ユーザーは自分がどのコンテンツ閲覧し、どれをまだ見たことがないのかが明確に分かるようなサイトを作ることができるのです。

擬似クラスと擬似要素との違い

擬似クラスに少し似た言葉で「擬似要素」というものがあります。擬似要素の役割は、要素の一部に対してスタイルを適用することです。具体的には、指定した要素の前後に新たな要素を追加したり、テキスト中の特定の文字だけに装飾を加えたりする際に用います。

以上を踏まえた上で、疑似クラスと擬似要素の違いは次のように捉えておくと良いでしょう。すなわち、擬似クラスは要素の特定の「状態」を取り出してスタイルを適用するのに対して、擬似要素は要素中の特定の「部分」を取り出してスタイル適用するのです。

よく使われる擬似クラス

では、よく使われる疑似クラスを見ていきます。

:linkと:Visited

:linkを指定すると、未訪問のリンクである場合にスタイルが適用されます。一方で:visitedを指定すると、訪問済みのリンクであれば記述したスタイルが適用されます。両者は基本セットで用いられるので、同時に説明します。

では、例を見てみましょう。

【HTML】

【CSS】

HTMLとCSSを画像のように記述しブラウザ上で確認すると、まだどこもクリックしていない(訪問していない)ため、a:linkのスタイルが適用され、次の画像のように全て赤い文字になります。

次に、「:visitedについて」と書かれたリンクをクリックしてみましょう。実在のURLを指定しているわけではないためページが遷移することはないですが、一度クリックすると訪問したことになり、a:visitedで記述したスタイルが適用されます。

:hover

:hoverは要素の上にポインターが乗っている状態を指定する疑似クラスです。HTMLはそのままで、CSSに次のように追記します。

【CSS】

すると次のように、ポインターが乗っている時に背景色が現れ、ポインターを放すと元の白背景に戻ります。

:active

:activeは、指定した要素がクリックされている状態にスタイルを適用する疑似クラスです。:hoverの下に次のように追記しましょう。

【CSS】

すると次のように、クリックしている時だけ文字の色が黒に変わります。

:nth-chile(n)

:nth-child(n)は、親要素の中のn番目の要素を指定するための疑似クラスです。同じタグが複数並んでいる場合などによく使われます。

【HTML】

上の画像で<ul>の中にあるn番目の<li>を指定する方法はいくつかのパターンがあります。

【CSS:偶数個目の<li>】

()の中にevenを入れると、偶数個目の<li>の文字が赤くなります。

【CSS:特定の<li>】

特定の<li>だけにスタイルを適用したい場合は、 ()の中に具体的な数字を入れます。

他にもn番目の指定方法はあるので、自分の実現したいデザインに合った方法を選ぶと良いでしょう。

擬似クラスを使う時の注意点

擬似クラスを用いる際は、効果の排他性と記述する順番に注意しなければなりません。まず前提として理解しなければならないのは、CSSは後に記述されたスタイルが優先的に適用される、という特徴を持っているということです。したがって、1つの要素に対して重複する可能性のあるスタイルが併置されている場合、より下に書かれたスタイルが適用されます。

さて、前の見出しで紹介した上から4つの擬似クラスは、それぞれ以下のような効果を持っていました。

:link訪問済みのリンクに対して指定する
:visited訪問済みのリンクに対して指定する
:hoverマウスを当てた状態に対して指定する
:activeマウスをクリックして話すまでの状態に対して指定する

特定の要素に対して上のような順番で記述すれば問題ありません。しかし、たとえば:hoverを:linkや:visitedの上に記述した場合、下にあるこれらの記述が優先され、:hoverの効果は上書きされてしまうのです。

上の4つの疑似クラスを利用してナビゲーションメニューなどのリンクを作成する場合は、表の順番通りに記述するようにしましょう。

まとめ

疑似クラスは単にデザインの幅を広げるだけでなく、ユーザーの動きに合わせたインタラクティブなサイトを作る上でも必須の技術です。効果の排他性などの注意点もありますが、使いこなせばCSSがより楽しくなるので、ぜひ積極的に活用していきましょう。