デザイン・コーディング

デザインの幅が広がる!擬似クラスの種類を紹介

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

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

CSSについて

目次

疑似クラスの基本

疑似クラスとは?

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

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

疑似クラスの種類

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

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

:link

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

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

HTML

  1. <a href="https://www.itra.co.jp/webmedia/ui-parts.html">UIについての記事</a>

CSS

  1. a:link{
  2. color: blue;
  3. }

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

:visited

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

HTML

  1. <a href="https://www.itra.co.jp/webmedia/ui-parts.html">UIについての記事</a>

CSS

  1. a:visited{
  2. color: purple;
  3. }

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

:hover

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

HTML

  1. <a href="https://www.itra.co.jp/webmedia/ui-parts.html">UIについての記事</a>

CSS

  1. a:hover{
  2. color: red;
  3. }

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

:active

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

HTML

  1. <a href="https://www.itra.co.jp/webmedia/ui-parts.html>UIについての記事</a>

CSS

  1. a:active{
  2. color: orange;
  3. }

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

: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

  1. <div>
  2.  <h1>大見出し</h1>
  3.   <p>1つ目の文章</p>
  4.   <p>2つ目の文章</p>
  5.   <p>3つ目の文章</p>
  6.  <h2>小見出し</h2>
  7.   <p>4つ目の文章</p>
  8.   <p>5つ目の文章</p>
  9.   <p>6つ目の文章</p>
  10. </div>
5_273x411

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

CSS

  1. p:nth-child(2n){
  2. color: purple;
  3. }

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

:nth-of-type(n)

nth-childとの違い

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

nth-of-type(n)とは?

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

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

HTML

  1. <div>
  2.  <h1>大見出し</h1>
  3.   <p>1つ目の文章</p>
  4.   <p>2つ目の文章</p>
  5.   <p>3つ目の文章</p>
  6.  <h2>小見出し</h2>
  7.   <p>4つ目の文章</p>
  8.   <p>5つ目の文章</p>
  9.   <p>6つ目の文章</p>
  10. </div>
5_273x411

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

CSS

  1. p:nth-of-type(2n){
  2. color: purple;
  3. }

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

疑似クラスの注意点

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

link・visited・hover・active

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

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

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

  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)擬似クラスを使用する際は、指定したい子要素が、親要素の中で兄弟関係にある子要素うち、何番目に当たるのかを数えて適用する必要があります。


【コラム】擬似要素と擬似クラス

擬似要素とは?

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

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

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

まとめ

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

また、WebMediaでは、今回のようなWebサイト制作のヒントとなる記事の他に、Webサイト制作の今がわかる情報も発信しています。ぜひ合わせて見てみてください。


Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか?

WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

関連記事

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。