擬似クラスとは？:hoverや:nth-child(n)など使える擬似クラスの種類を紹介

擬似クラスは何のために使用するものなのかを、しっかりと理解できていますか？擬似クラスとは、CSSのセレクタに付け加えて使用し、デザインの適用方法を増やすことができるものです。擬似クラスを理解して使用できるようになれば、よくＷebサイトで見るような、凝ったデザインや動きをつけられるようになります。

今回は、擬似クラスの基本や主要な種類、それぞれの使用方法や混同されがちな擬似要素との違いを紹介します。

擬似クラスとは？

擬似クラスとは、セレクタの後に付け加えて、指定するスタイルを適用する状態を決めるものです。特定の状態を表す擬似クラスを用いることで、ユーザーの動きに合わせてデザインを変化させることができます。

また、擬似クラスは、ある要素の特定の状態や特定の子要素だけにスタイルを指定することができるので、HTMLには一切変更を加える必要がないというメリットがあります。記述方法は、デザインを適用させたい要素の後に「:」をつけて擬似クラスを指定します。

擬似要素とは？

擬似要素とは、指定した要素の一部に対して影響を与えるために使用されます。文章の1文字目や1行目の文字色やサイズを変化させたり、選択した要素の先頭または文末に文章を追加することなどができます。擬似要素は、HTMLには一切変更を加えることなく、ある要素の内容を変更したり追加したりすることができる点がメリットです。記述方法は、デザインを適用させたい要素の後に「::」をつけて指定します。

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

擬似要素は指定した要素の中の一部に対して影響を与えるのに対して、擬似クラスは指定したもの全体の変更に影響を与える点で違いがあります。擬似要素は文章の中の一行・一文字単位の変更を加えることや、要素に新しい文章を付け加えるために使用されますが、擬似クラスは、マウスホバーなどの文書構造の範囲外にある情報や、偶数のpタグにだけスタイルを指定するなど、単体のセレクタではできない表現を実現をするために使用されます。

擬似クラスの種類

擬似クラスには、主要なものでは以下の6種類の擬似クラスがあります。

• :link
• :visited
• :hover
• :active
• :nth-child(n)
• :nth-of-type(n)

:link

link擬似クラスは、Ｗebサイト内にあるリンクのうち、未訪問のリンクのスタイルを指定する擬似クラスです。

例として、ＷebMediaのUIについての記事のリンクを使用します。

HTML

CSS

このように指定すると、上記のリンクが未訪問の場合は、リンクの文字色を青にすることができます。

:visited

visited擬似クラスは、Ｗebサイト内にあるリンクのうち、訪問済みのリンクのスタイルを指定する擬似クラスです。

HTML

CSS

このように指定すると、上記のリンクが訪問済みの場合は、リンクの文字色を紫にすることができます。

:hover

hover擬似クラスは、指定した要素にカーソルが重なっている、いわゆるオンマウスの時のスタイルを指定する擬似クラスです。

HTML

CSS

このように指定すると、上記のリンクにカーソルが重なっている場合は、文字色を赤することができます。

:active

active擬似クラスは、指定した要素がクリックされている時のスタイルを指定する擬似クラスです。

HTML

CSS

このように指定すると、上記のリンクがクリックされている最中である場合は、リンクの文字色を緑にすることができます。

:nth-child(n)

nth-child(n)擬似クラスは、ある要素の隣接している子要素を、最初から数えてn番目にあたる要素に限定してスタイルを指定するための擬似クラスです。nth-child(n)擬似クラスは、箇条書きのli要素の中で特定の順番にあるli要素にのみスタイルを指定する際に使用されることが多いです。

nth-child(n)以外にも、次に紹介するnth-of-type(n)、一番最初の子要素にスタイルを指定するfirst-child、一番最後の子要素にスタイルを指定するlast-childなどがあります。

nの部分に数字を指定する方法を表で紹介します。

	()の中	()の中
奇数	2n-1	odd
偶数	2n	even
特定の順番	1,2,3,4,5...
特定の倍数	3n,4n,5n,6n,7n...

nth-child(n)擬似クラスを使用する際は、親要素の中で兄弟関係にある子要素すべてがカウントされていることを理解する必要があります。たとえば、以下のように親要素であるdivタグの中に、子要素であるh1タグとh2タグと、6つのpタグが入っている場合、

HTML

pタグの中で2の倍数の要素にのみスタイルを指定して文字色を紫にしたい際は、以下のようにCSSを記述します。

CSS

divタグの子要素でpと兄弟関係にあるh1やh2も含めて、2の倍数に当たる要素の文字色を、紫に指定することができます。

:nth-of-type(n)

nth-of-type(n)擬似クラスは、先ほど紹介したnth-child(n)とは異なり、単純にある要素の子要素を最初から数えてn番目に当たる要素にのみスタイルを指定する擬似クラスです。nの部分の数字の記述方法は、nth-child(n)で紹介した表と同じです。

nth-childとの違い

nth-child(n)擬似クラスは、指定した子要素兄弟関係にある他の子要素もカウントしてスタイルを適用するのに対して、nth-of-type(n)擬似クラスは、指定する子要素の間に他の要素が挟まっていても、他の要素はカウントせずに指定する子要素を数えてスタイルを指定します。

以下のように親要素であるdivタグの中に、子要素である3つのpタグをそれぞれ含む、divの子要素であるh1とh2が入っている場合、

HTML

pタグの中で2の倍数の要素にのみスタイルを指定して文字色を紫にしたい際は、以下のようにCSSに記述します。

CSS

単にpタグを上から数えて、2 番目のpタグの文字色を紫に指定することができます。

擬似クラスの注意点

上記で紹介した6つの擬似クラスを使用する際の注意点を紹介します。

link・visited・hover・activeの記述の順番

CSSでは、リンクに関する擬似クラスのうち最後に記述された擬似クラスが優先されるので、記述の順番を間違えるとうまく機能しないことがあります。たとえばhoverは、訪問済みのリンクに対しても、オンマウスの際には以下のようにhoverのスタイルが適用されなければなりません。

しかし、visitedをhoverよりも後に記述した場合、visitedのスタイルが優先されてしまうので、訪問済みのリンクがオンマウスの時でもhoverのスタイルは適用されずに、以下のようにvisitedのスタイル、今回の例だと紫色が適用されてしまいます。

これらの擬似クラスは、指定したリンクの状態に合わせてデザインを変更するために併用して使用されることが多いです。基本的には、以下の順番で記述すれば問題はありません。

1. :link
2. :visited
3. :hover
4. :active

このように、link・visited・hover・activeの擬似クラスは記述の順番に注意が必要です。

nth-child(n)とnth-of-type(n)の違い

nth-child(n)とnth-of-type(n)は、スタイルを指定する子要素の数え方に違いがあるので、注意が必要です。これらの擬似クラスは、親要素に含まれている子要素を上から順に数えて何番目かの子要素にのみ、スタイルを指定する際に使用されますが、選択した要素の兄弟要素もカウントするかどうかで、使用するべき擬似クラス変わります。

これらの擬似クラスの子要素の数え方を理解していないと、思い通りのスタイル指定ができなくなってしまいます。ですので、nth-child(n)擬似クラスを使用する際は、指定したい子要素が、親要素の中で兄弟関係にある子要素うち、何番目に当たるのかを数えて適用する必要があります。

まとめ

今回は、擬似クラスの種類や使用方法について紹介しました。擬似クラスの種類は上記のほかにもたくさんあるので、使用できる擬似クラスの種類を増やしてWebサイト制作の幅を広げてみてはいかがでしょうか。擬似クラスはHTMLを変更する必要なしに、複雑なスタイル指定を可能にするので、マスターすれば文章構造のわかりやすさも追及することができるでしょう。