CSS 疑似クラス 1番目・n番目・最後・奇数偶数のスタイル指定

CSSの疑似クラス（Pseudo classes）を使って、1番目・n番目・最後・奇数偶数・倍数・1番目以外、n番目以外など、特定の要素にスタイルを指定する方法を解説します。

疑似クラスを用いることで、次のようなことを表現できます。

• 要素の1番目だけにCSSを適用する
• 要素の〇番目だけにCSSを適用する
• 要素の〇番目以外にCSSを適用する
• 要素の〇番目以降にCSSを適用する
• 要素の最後だけにCSSを適用する
• 表テーブルの奇数・偶数の行や列にCSSを適用する

Web制作では、このようなスタイル指定は頻繁に使いますので、基本基礎をしっかりマスターしておきましょう。

疑似クラスの基本基礎

CSSの疑似クラスとは、特定の条件において、特定の要素にスタイルを指定できるCSSで定められたクラスです。
書き方は簡単で、セレクタに「:」シングルコロンを付けて疑似クラスを記述します。

セレクタ:疑似クラス {
  プロパティ: 値;
}

そして、n番目の疑似クラスを取り扱う上で、重要なポイントがHTMLの構造です。
つまり、親要素、子要素、孫要素の関係についての理解が大切です。

例として、次のHTMLコードでHTML構造を見てみましょう。

<div> // 親要素
  <h2>タイトル</h2>  // divの子要素
  <p>文章</p>  // divの子要素
</div>
<div> // 親要素
  <ul>  // divの子要素
    <li></li>  // divの孫要素 ulの子要素
    <li></li>
    <li></li>
  </ul>
<div>

一番外側の2つのブロック<div></div>が、親要素です。
この場合、1つ目の親要素に含まれる<h2></h2>と<p></p>、2つ目の親要素に含まれる<ul></ul>は、子要素です。
ulに含まれる<li></li>は、2つ目のdivの孫要素およびulの子要素となります。
ちなみに、1つ目と2つ目のdiv要素のように、親要素で同じ並列にある関係を兄弟要素と言います。

n番目の疑似クラスでは、親要素を基準に子要素・孫要素の位置を特定して〇番目という指定を行いますので、HTMLの構造を理解しておいてください。

特定番目の指定に使える疑似クラス一覧

はじめに、1番目・n番目・最後・奇数偶数・倍数の要素指定に使える疑似クラスをまとめておきます。
いつでもチェックできるように索引として活用してください。

n番目の要素を指定する疑似クラス

n番目の要素を指定する場合は、nth-childとnth-of-typeの2種類の疑似クラスがあります。
nth-childとnth-of-typeの使い方を理解することで、他の疑似クラスにも応用できるので、詳しく解説していきます。

nth-childの使い方

nth-childは、特定の親要素グループにおいて、すべての子要素を上から順番に数えて、n番目にあたる要素を指定することができます。

CSSの書き方は、以下になります。nには、何番目を指定するのか整数値を記述します。

セレクタ:nth-child(n) {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードのliタグの2番目だけをcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSでは、:nth-childを使って、2番目だけにスタイルが反映されるよう、( )には2を指定します。

ul li:nth-child(2) {
  color: blue;
}

結果は、リストの2番目のテキストだけが青色になっていることがわかります。

nth-of-typeの使い方

nth-of-typeは、特定の親要素において、指定する型（タグ）の要素を上から順番に数えて、n番目にあたる要素を指定することができます。

CSSの書き方は、以下になります。nには、何番目を指定するのか整数値を記述します。

セレクタ:nth-of-type(n) {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードのliタグの2番目だけをcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSでは、:nth-of-typeを使って、2番目だけにスタイルが反映されるよう、( )には2を指定します。

ul li:nth-of-type(2) {
  color: blue;
}

結果は、リストの2番目のテキストだけが青色になっていることがわかります。

nth-childとnth-of-typeの違い

上記の2つの例では、同じ使い方をして同じ結果になり、一見違いがないように感じますが、実は、この2つには異なる点があります。

それは、数える基準と対象です。

次は、少し複雑なHTMLコードで違いを見ていきましょう。違いがわかるように並べてコードを書いてみます。HTML上は、全く同じコードですが、それぞれの親要素であるsectionタグに、sample1とsample2というクラス名を付けておきます。

/* 検証：nth-child */
<section class="sample1">
  <h2>子要素の1番目</h2>
  <p>子要素の2番目（pタグの1番目）</p>
  <p>子要素の3番目（pタグの2番目）</p>
  <p>子要素の4番目（pタグの3番目）</p>
</section>

/* 検証：nth-of-type */
<section class="sample2">
  <h2>子要素の1番目</h2>
  <p>子要素の2番目（pタグの1番目）</p>
  <p>子要素の3番目（pタグの2番目）</p>
  <p>子要素の4番目（pタグの3番目）</p>
</section>

CSSは、sample1クラス側をnth-child、sample2クラス側をnth-of-typeを使って、同じpタグに対し2番目を指定します。

/* 検証：nth-child */
.sample1 p:nth-child(2) {
  color: blue;
}

/* 検証：nth-of-type */
.sample2 p:nth-of-type(2) {
  color: blue;
}

Web上で表示した検証結果が以下になります。

【nth-childの検証結果】

【nth-of-typeの検証結果】

いかがでしょう。最初の例とは異なる結果になっているのがわかります。

nth-childは、子要素を上から順に数えて2番目の要素をn番目の対象としています。
つまり、すべての子要素の中のn番目です。

nth-of-typeは、pタグを限定に子要素を上から順に数えて2番目の要素をn番目の対象としています。
つまり、指定した型（タグ）の子要素の中のn番目です。

次に、クラス名を付けて指定した場合の例を見ておきましょう。
それぞれの親要素であるsectionタグに、sample3とsample4というクラス名を付けておきます。
さらに、textというクラス名を、あえてスタイルが反映しない結果になるよう変則的に追記しておきます。

/* 検証：nth-child */
<section class="sample3">
  <h2 class="text">子要素の1番目（h2タグの1番目／textクラスの1番目）</h2>
  <p>子要素の2番目（pタグの1番目／textクラスなし）</p>
  <h2>子要素の3番目（h2タグの2番目／textクラスなし）</h2>
  <p class="text">子要素の4番目（pタグの2番目／textクラスの2番目）</p>
</section>

/* 検証：nth-of-type */
<section class="sample4">
  <h2 class="text">子要素の1番目（h2タグの1番目／textクラスの1番目）</h2>
  <p class="text">子要素の2番目（pタグの1番目／textクラスの2番目）</p>
  <h2>子要素の3番目（h2タグの2番目／textクラスなし）</h2>
  <p>子要素の4番目（pタグの2番目／textクラスなし）</p>
</section>

CSSは、sample3クラス側をnth-child、sample4クラス側をnth-of-typeを使って、textクラスに対し2番目を指定します。

/* 検証：nth-child */
.sample3 .text:nth-child(2) {
  color: blue;
}

/* 検証：nth-of-type */
.sample4 .text:nth-of-type(2) {
  color: blue;
}

【nth-childの検証結果】

検証結果を見ると、nth-childのスタイルが反映していません。
その理由は、「子要素の2番目」が適用されるはずですが、textクラスが付いていないためスタイルは適用されないことになります。

【nth-of-typeの検証結果】

検証結果を見ると、こちらもnth-of-typeのスタイルが反映していません。
その理由は、nth-of-typeは、指定した型（タグ）を見ているからです。

例では、「h2タグとpタグの2番目」且つ「textクラスの2番目」がnth-of-typeで指定した2番目の対象になります。今回は、該当する「h2タグの2番目」と「pタグの2番目」が「textクラスなし」のため、スタイルは反映されないという結果になります。

「h2タグの2番目」と「pタグの2番目」に「textクラス」を付けると結果はこのようになります。

nth-childとnth-of-typeのCSSが思うように効かないときは、このような疑似クラスの基本をチェックしてみましょう。
この理論は、後述の疑似クラスにも適用されますので、しっかり理解しておいてください。

1番目の要素を指定する疑似クラス

1番目の要素を指定する場合は、first-childとfirst-of-typeの2種類の疑似クラスがあります。

first-childの使い方

first-childは、特定の親要素グループにおいて、すべての子要素を上から順番に数えて、1番目にあたる要素を指定することができます。

CSSの書き方は、以下になります。

セレクタ:first-child {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードのliタグの1番目をcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSでは、疑似クラス:first-childを使って、スタイルを指定しています。

ul li:first-child {
  color: blue;
}

結果は、リストの1番目のテキストだけが青色になっていることがわかります。

first-of-typeの使い方

first-of-typeは、特定の親要素において、指定する型（タグ）の要素を上から順番に数えて、1番目にあたる要素を指定することができます。

CSSの書き方は、以下になります。

セレクタ:first-of-type {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードのliタグの1番目をcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSでは、疑似クラス:first-of-typeを使って、スタイルを指定しています。

ul li:first-of-type {
  color: blue;
}

結果は、リストの1番目のテキストだけが青色になっていることがわかります。

first-childとfirst-of-typeの違い

上記の2つの単純な例では、同じ結果になりましたが、nth-childとnth-of-typeの違いと同様に、数える基準と対象が異なります。

次のHTMLコードで違いを見てみましょう。

/* 検証：first-child */
<section class="sample1">
  <h2>子要素の1番目</h2>
  <p>子要素の2番目（pタグの1番目）</p>
  <p>子要素の3番目（pタグの2番目）</p>
  <p>子要素の4番目（pタグの3番目）</p>
</section>

/* 検証：first-of-type */
<section class="sample2">
  <h2>子要素の1番目</h2>
  <p>子要素の2番目（pタグの1番目）</p>
  <p>子要素の3番目（pタグの2番目）</p>
  <p>子要素の4番目（pタグの3番目）</p>
</section>

CSSでは、p要素に対してスタイルを指定しています。

/* 検証：first-child */
.sample1 p:first-child {
  color: blue;
}

/* 検証：first-of-type */
.sample2 p:first-of-type {
  color: blue;
}

Web上で表示した検証結果が以下になります。

【first-childの検証結果】

first-childは、子要素を上から順に数えて1番目の要素を対象としています。つまり、すべての子要素の中の1番目です。
従って、子要素の1番目にスタイルが適用されるはずですが、CSSにおいてp要素に限定していますので、スタイルは適用されません。

【first-of-typeの検証結果】

first-of-typeは、pタグを限定に子要素を上から順に数えて1番目の要素対象としています。
つまり、指定した型（タグ）の子要素の中の1番目です。
従って、pタグの1番目にスタイルが適用されています。

また、独自のクラス名を付けた場合も、n番目の要素指定と同じように挙動が異なりますので注意してください。

最後の要素を指定する疑似クラス

最後（最終番目）の要素を指定する場合は、last-childとlast-of-typeの2種類の疑似クラスがあります。

last-childの使い方

last-childは、特定の親要素グループにおいて、すべての子要素を上から順番に数えて、最後の要素を指定することができます。

CSSは、このように書きます。

セレクタ:last-child {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードの最後のliタグをcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSでは、疑似クラス:last-childを使って、スタイルを指定しています。

ul li:last-child {
  color: blue;
}

結果は、リストの最後のテキストだけが青色になっていることがわかります。

last-of-typeの使い方

last-of-typeは、特定の親要素において、指定する型（タグ）の要素を上から順番に数えて、最後にあたる要素を指定することができます。

CSSは、このように書きます。

セレクタ:last-of-type {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードの最後のliタグをcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSでは、疑似クラス:last-of-typeを使って、スタイルを指定しています。

ul li:last-of-type {
  color: blue;
}

結果は、リストの最後のテキストだけが青色になっていることがわかります。

last-childとlast-of-typeの違い

上記の2つの単純な例では、同じ結果になりましたが、これまで見てきたnth-childとnth-of-typeの違いと同様に、数える基準と対象が異なります。

少し複雑なHTMLコードで違いを見てみましょう。あえて、最後の要素をspanタグにしています。

/* 検証：last-child */
<section class="sample1">
  <h2>子要素の1番目</h2>
  <p>子要素の2番目（pタグの1番目）</p>
  <p>子要素の3番目（pタグの2番目）</p>
  <span>子要素の4番目（spanタグの1番目）</span>
</section>

/* 検証：last-of-type */
<section class="sample2">
  <h2>子要素の1番目</h2>
  <p>子要素の2番目（pタグの1番目）</p>
  <p>子要素の3番目（pタグの2番目）</p>
  <span>子要素の4番目（spanタグの1番目）</span>
</section>

CSSでは、p要素に対してスタイルを指定しています。

/* 検証：last-child */
.sample1 p:last-child {
  color: blue;
}

/* 検証：last-of-type */
.sample2 p:last-of-type {
  color: blue;
}

Web上で表示した検証結果が以下になります。単純な例とはちょっと異なる結果になっているのがわかります。

【last-childの検証結果】

last-childは、子要素を上から順に数えて最後の要素を対象としています。
つまり、すべての子要素の中の最後です。
従って、最後の子要素にスタイルが適用されるはずですが、CSSにおいては、p要素に限定していますので、最後のspan要素にスタイルは適用されません。

最後のspanタグをpタグに変えた場合は、どうでしょう。

このように最後の子要素且つpタグにスタイルが適用されます。

【last-of-typeの検証結果】

last-of-typeは、pタグを限定に子要素を上から順に数えて最後の要素対象としています。
つまり、指定した型（タグ）の子要素の中の最終番目です。
従って、最後のpタグにスタイルが適用されています。

また、独自のクラス名を付けた場合も、n番目の要素指定と同じように挙動が異なりますので注意してください。

奇数の要素を指定する疑似クラス

奇数番目の要素を指定するときは、nth-child(odd)とnth-of-type(odd)とnth-of-type(2n+1)の3種類の疑似クラスを使うことができます。

nth-child(odd)・nth-of-type(odd)・nth-of-type(2n+1)の使い方

基本的な使い方は、n番目の要素指定と同じ理論なので、まとめて解説します。

CSSは、このように書きます。

セレクタ:nth-child(odd) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(odd) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(2n+1) {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードのliタグの奇数番目をcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

CSSでは、それぞれ3種類の疑似クラスを使って、スタイルを指定します。

ul li:nth-child(odd) {
  color: blue;
}

ul li:nth-of-type(odd) {
  color: blue;
}

ul li:nth-of-type(2n+1) {
  color: blue;
}

結果は、次の通りです。

【nth-child(odd)の結果】

【nth-of-type(odd)の結果】

【nth-of-type(2n+1)の結果】

どの疑似クラスも同じ奇数番目が青色になっていることがわかります。

nth-child(odd)・nth-of-type(odd)・nth-of-type(2n+1)の違い

nth-child(odd)、nth-of-type(odd)、nth-of-type(2n+1)の違いは、n番目のときと同じように、数える基準と対象が異なる点です。

実際は、Web制作において奇数番目を使う場面は限られます。
例えば、HTMLのul、olのliや、dl直下のdt、dd、teble直下のth、tdといった、同じタグを繰り返すコードの中で、奇数番目の指定を行うことが多いです。

つまり、複雑なHTML構成のときは、奇数番目の指定はあまり使わないということです。
n番目のときのように、どの疑似要素を使えば良いのか、あまり深く考えなくても大丈夫です。

例として、よく使う表レイアウトのtableタグで違いを見ておきましょう。
表テーブルの奇数番目の行の背景色を3つの疑似要素を使って検証してみます。

HTMLは共通の内容です。tableに付けるクラス名は、smaple1、samale2、samaple3と異なる名前にします。

<table class="クラス名">
  <tr>
    <th>1行目1列目</th>
    <th>1行目2列目</th>
    <th>1行目3列目</th>
    <th>1行目4列目</th>
  </tr>
  <tr>
    <td>2行目1列目</td>
    <td>2行目2列目</td>
    <td>2行目3列目</td>
    <td>2行目4列目</td>
  </tr>
  <tr>
    <td>3行目1列目</td>
    <td>3行目2列目</td>
    <td>3行目3列目</td>
    <td>3行目4列目</td>
  </tr>
  <tr>
    <td>4行目1列目</td>
    <td>4行目2列目</td>
    <td>4行目3列目</td>
    <td>4行目4列目</td>
  </tr>
</table>

CSSで、tableの奇数の行を指定する場合は、このように書きます。背景色は薄い青を指定します。

/* nth-child(odd)の検証 */
.sample1 tr:nth-child(odd) td {
  background: #eaf6fe;
}

/* nth-of-type(odd)の検証 */
.sample2 tr:nth-of-type(odd) td {
  background: #eaf6fe;
}

/* nth-of-type(2n+1)の検証 */
.sample3 tr:nth-of-type(2n+1) td {
  background: #eaf6fe;
}

【nth-child(odd)の結果】

【nth-of-type(odd)の結果】

【nth-of-type(2n+1)の結果】

繰り返し使うHTMLタグの中で奇数番目を指定した場合、どれも同じ結果になっているのがわかります。

子要素を複数のHTMLタグで構造化する場合や、独自のクラス名で指定する場合は、挙動が異なりますので、n番目指定のnth-childとnth-of-typeの違いを参考にしてください。

偶数の要素を指定する疑似クラス

偶数番目の要素を指定するときは、nth-child(even)とnth-of-type(even)とnth-of-type(2n)の3種類の疑似クラスを使うことができます。

nth-child(even)・nth-of-type(even)・nth-of-type(2n)の使い方

奇数番目と同じく、基本的な使い方は、n番目の要素指定と同じ理論なので、まとめて解説します。

CSSの基本構文は、こちらです。

セレクタ:nth-child(even) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(even) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(2n) {
  プロパティ: 値; // スタイルを記述
}

例として、次のHTMLコードのliタグの偶数番目をcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

CSSでは、それぞれ3種類の疑似クラスを使って、スタイルを指定します。

ul li:nth-child(even) {
  color: blue;
}

ul li:nth-of-type(even) {
  color: blue;
}

ul li:nth-of-type(2n) {
  color: blue;
}

結果は、次の通りです。

【nth-child(even)の結果】

【nth-of-type(even)の結果】

【nth-of-type(2n)の結果】

どの疑似クラスも同じ偶数番目が青色になっていることがわかります。

nth-child(even)・nth-of-type(even)・nth-of-type(2n)の違い

nth-child(even)、nth-of-type(even)、nth-of-type(2n)の違いも、n番目のときと同じように、数える基準と対象が異なります。

ただし、使用する場面は、奇数番目と同じように限られます。
HTMLのul、olのliや、dl直下のdt、dd、teble直下のth、tdといった、同じタグを繰り返し使う中で、偶数番目を指定することが多いです。

こちらも表テーブルを例に、偶数番目の行の背景色を3つの疑似要素を使って検証してみます。
HTMLは共通の内容です。tableに付けるクラス名は、smaple1、samale2、samaple3と異なる名前にします。

<table class="クラス名">
  <tr>
    <th>1行目1列目</th>
    <th>1行目2列目</th>
    <th>1行目3列目</th>
    <th>1行目4列目</th>
  </tr>
  <tr>
    <td>2行目1列目</td>
    <td>2行目2列目</td>
    <td>2行目3列目</td>
    <td>2行目4列目</td>
  </tr>
  <tr>
    <td>3行目1列目</td>
    <td>3行目2列目</td>
    <td>3行目3列目</td>
    <td>3行目4列目</td>
  </tr>
  <tr>
    <td>4行目1列目</td>
    <td>4行目2列目</td>
    <td>4行目3列目</td>
    <td>4行目4列目</td>
  </tr>
</table>

CSSで、tableの偶数の行を指定する場合は、このように書きます。

/* nth-child(even)の検証 */
.sample1 tr:nth-child(even) td {
  background: #eaf6fe;
}

/* nth-of-type(even)の検証 */
.sample2 tr:nth-of-type(even) td {
  background: #eaf6fe;
}

/* nth-of-type(2n)の検証 */
.sample3 tr:nth-of-type(2n) td {
  background: #eaf6fe;
}

【nth-child(even)の結果】

【nth-of-type(even)の結果】

【nth-of-type(2n)の結果】

table直下で繰り返し使うHTMLタグの中で偶数番目を指定した場合、どれも同じ結果になっているのがわかります。

偶数指定の場合も、子要素を複数のHTMLタグで構成する場合や、独自のクラス名で指定する場合は、挙動が異なりますので、n番目指定のnth-childとnth-of-typeの違いを参考にしてください。

倍数の要素を指定する疑似クラス

倍数の要素を指定するときは、nth-child(xn)とnth-of-type(xn)の2種類の疑似クラスを使うことができます。
ここでは、倍数をxとし、xに倍数の数字を指定する仮定で解説します。

nth-child(xn)・nth-of-type(xn)の使い方

基本的な使い方は、偶数番目と同じです。
CSSの基本構文は、こちらです。

セレクタ:nth-child(xn) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(xn) {
  プロパティ: 値; // スタイルを記述
}

2の倍数を指定するときは、nth-of-type(2n)となります。
これは、偶数指定で見たときの、nth-of-type(2n)と同じ構文になります。
2倍指定のときは、偶数指定と同じ結果になりますので、どちらを使っても良いというわけです。

例では、3の倍数にあたるliタグをcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

CSSでは、それぞれ2種類の疑似クラスを使って、スタイルを指定します。
3の倍数なので、xには3を入れます。

ul li:nth-child(3n) {
  color: blue;
}

ul li:nth-of-type(3n) {
  color: blue;
}

それぞれの結果は、次の通りです。

【nth-child(3n)の結果】

【nth-of-type(3n)の結果】

どちらの疑似クラスも同じ3の倍数、つまり3番目と6番目が青色になっていることがわかります。
倍数指定で、あまり大きな数値を使うことはありませんが、例えば、4の倍数のときは、xに4を。5の倍数のときは、xに5を。といった感じで倍数の数値を入れるだけです。

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

nth-child(xn)、nth-of-type(xn)の違いも、n番目の指定と同じように、数える基準と対象が異なります。

また、子要素を複数のHTMLタグで構成する場合や、独自のクラス名で指定する場合は、挙動が異なりますので、n番目指定のnth-childとnth-of-typeの違いを参考にしてください。

x番目以降の要素を指定する疑似クラス

x番目以降の要素を指定するときは、nth-child(n + x)とnth-of-type(n + x)の2種類の疑似クラスを使うことができます。

nth-child(n + x)・nth-of-type(n + x)の使い方

CSSの基本構文は、こちらです。
xには、指定するx番目の数字を入れます。

セレクタ:nth-child(n + x) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(n + x) {
  プロパティ: 値; // スタイルを記述
}

2番目以降を指定するときは、xに2を入れます。
3番目以降ならxに3を。10番目以降ならxに10を入れます。

例として、2番目以降にあたるliタグをcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

CSSでは、、2番目以降を指定したいので、xに2を入れます。

/* nth-child(n + x)の場合 */
ul li:nth-child(n + 2) {
  color: blue;
}

/* nth-of-type(n + x)の場合 */
ul li:nth-of-type(n + 2) {
  color: blue;
}

それぞれの結果は、このようになります。

【nth-child(n + 2)の結果】

【nth-of-type(n + 2)の結果】

どちらもliリストの2番目以降、つまり1番目以外は、すべて青色に変わっています。

x番目以降を使う場面としては、ナビゲーションやリスト項目で、2番目以降だけに隙間を空けたいときなどに使えます。

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

nth-child(n + x)とnth-of-type(n + x)の違いも、n番目の指定と同じように、数える基準と対象が異なります。

子要素を複数のHTMLタグで構成する場合や、独自のクラス名で指定する場合は、挙動が異なりますので、n番目指定のnth-childとnth-of-typeの違いを参考にしてください。

1番目以外の要素を指定する疑似クラス

特定の要素以外を指定するときは、これまで見てきた疑似クラスに、notを使います。
notを使った疑似クラスを否定疑似クラスと言います。
使い方は、他の疑似クラスと同じなので、書き方さえ覚えてしまえば便利に使うことができます。

まずは、1番目以外の要素を指定から解説します。

1番目以外の要素を指定するときは、not(:first-child)とnot(:first-of-type)、nth-child(n + 2)とnth-of-type(n + 2)の4種類の疑似クラスを使う方法があります。

nth-child(n + 2)とnth-of-type(n + 2)は、x番目以降の要素指定で解説していますが、2番目以降というカタチで指定することで、代用することができます。

not(:first-child)・not(:first-of-type)の使い方

1番目以外を指定する4種類の基本構文はこちらです。

セレクタ:not(:first-child) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:not(:first-of-type) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-child(n + 2) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:nth-of-type(n + 2) {
  プロパティ: 値; // スタイルを記述
}

first-childとfirst-of-typeを使う場合は、セレクタの後に否定疑似クラス:not()を付けて、( )の中に1番目指定の疑似クラスを入れます。

また、x番目以降の構文を使って2番目以降を指定することで、notを使わなくても指定することができます。

例として、次のHTMLコードの1番目以外をcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

CSSは、、4つの疑似クラスを使って4パータンの結果を検証してみます。

/* not(:first-child)の場合 */
ul li:not(:first-child) {
  color: blue;
}

/* not(:first-of-type)の場合 */
ul li:not(:first-of-type) {
  color: blue;
}

/* :nth-child(n + 2)の場合 */
ul li:nth-child(n + 2) {
  color: blue;
}

/* :nth-of-type(n + 2)の場合 */
ul li:nth-of-type(n + 2) {
  color: blue;
}

それぞれの結果は、このようになります。

【not(:first-child)の結果】

【not(:first-of-type)の結果】

【nth-child(n + 2)の結果】

【nth-of-type(n + 2)の結果】

liリストの1番目以外は、すべて青色に変わってますね。
nth-child(n + 2)とnth-child(n + 2)のパターンは、x番目以降の解説で出てきた1番目以降の例と全く同じ使い方になっていることがわかります。

not(:first-child)とnot(:first-of-type)の違い

not(:first-child)とnot(:first-of-type)の違いも、n番目の指定と同じように、数える基準と対象が異なります。
子要素を複数のHTMLタグで構成する場合、独自のクラス名で指定する場合は、n番目指定のnth-childとnth-of-typeの違いを参考に挙動に注意してください。

最後以外の要素を指定する疑似クラス

最後以外の要素を指定するときは、1番目以外のときと同じく、否定疑似クラスを使います。
not(:last-child)とnot(:last-of-type)の2種類の否定疑似クラスで指定することができます。

not(:last-child)・not(:last-of-type)の使い方

最後以外の要素を指定する基本構文はこちらです。

セレクタ:not(:last-child) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:not(:last-of-type) {
  プロパティ: 値; // スタイルを記述
}

セレクタの後に否定疑似クラス:not()を付けて、( )の中に最後の要素指定で解説したlast-childとlast-of-typeの疑似クラスを入れます。

例として、次のHTMLコードの最後以外をcolorプロパティで青色にしてみます。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
  <li>リスト6</li>
</ul>

CSSは、2つの否定疑似クラスを使って、それぞれの結果を検証してみます。

/* not(:last-child)の場合 */
ul li:not(:last-child) {
  color: blue;
}

/* not(:last-of-type)の場合 */
ul li:not(:last-of-type) {
  color: blue;
}

【not(:last-child)の結果】

【not(:last-of-type)の結果】

not(:last-child)とnot(:last-of-type)の違い

not(:last-child)とnot(:last-of-type)の違いも、n番目の指定と同じように、数える基準と対象が異なります。
子要素を複数のHTMLタグで構成する場合、独自のクラス名で指定する場合は、n番目指定のnth-childとnth-of-typeの違いを参考にしてください。

n番目以外の要素を指定する疑似クラス

n番目以外の要素を指定するときは、n番目以外のときの疑似クラスと否定疑似クラスを組み合わせて使います。
not(:nth-child(n))とnot(:nth-of-type(n))の2種類の否定疑似クラスで指定することができます。

not(:nth-child(n))・not(:nth-of-type(n))の使い方

n番目以外を指定する基本構文はこちらです。
nには、番目を指定する数字を入れます。

セレクタ:not(:nth-child(n)) {
  プロパティ: 値; // スタイルを記述
}

セレクタ:not(:nth-of-type(n)) {
  プロパティ: 値; // スタイルを記述
}

セレクタの後に否定疑似クラス:not()を付けて、( )の中にnth-childとnth-of-typeの疑似クラスを入れます。

例として、次のHTMLコードの2番目以外をcolorプロパティで青色にしてみましょう。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

CSSは、2つの否定疑似クラスを使って、それぞれの結果を検証してみます。

/* not(:nth-child(n))の場合 */
ul li:not(:nth-child(2)) {
  color: blue;
}

/* not(:nth-of-type(n))の場合 */
ul li:not(:nth-of-type(2)) {
  color: blue;
}

【not(:nth-child(n))の結果】

【not(:nth-of-type(n))の結果】

どちらの疑似要素の場合でも、liリストの2番目以外は青色に変わってます。

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

not(:nth-child(n))とnot(:nth-of-type(n))の違いも、n番目の指定と同じように、数える基準と対象が異なります。
子要素を複数のHTMLタグで構成する場合、独自のクラス名で指定する場合は、n番目指定のnth-childとnth-of-typeの違いを参考にしてください。

応用的な疑似クラスの使い方

これまで見てきた疑似クラスを組み合わせることで、複雑な要素のスタイル指定が可能になります。
応用的な使い方として、サンプル一例を紹介します。

例えば、ul liリストを使って、3列横並びにしたflexboxデザインの場合を想定します。
疑似クラスを使って、列ごとに異なる背景色を付けたいとき、どの疑似クラスを使えばよいでしょか。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

3列なので、1列目には、1番と4番が、2列目には、2番と5番が、3列目には、3番と6番が配置されると予想できます。従って、奇数偶数の疑似クラスは使えないことがわかります。
n番目を使って1つ1つ指定することは可能ですが、liリストの数が多い場合は現実的ではありません。

結論としては、倍数の疑似クラスを応用することで実現できます。

ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
ul li {
  flex-basis:30%;
  background:#eaf5f4;
  text-align:center;
  margin:0;
  padding:15px;10px;
  border:1px solid #fff;
}

/* 2列目の背景色 */
ul li:nth-child(3n - 1) {
 background:#83ccc9;
}

/* 1列目の背景色 */
ul li:nth-child(3n - 2) {
 background:#1d928f;
}

まず、nth-childを使って3の倍数であるnth-child(3n)を指定します。
そのうえで、マイナス値を付けることで次のような指定ができます。
nth-child(3n – 1)は、3の倍数の1つ前の要素を指定。
nth-child(3n – 2)は、3の倍数の2つ前の要素を指定。

結果は次の通りです。

倍数指定の疑似クラスと組み合わせると、このようなスタイル指定も可能となります。
疑似クラスは、マイナス値も使えることを覚えておきましょう。

まとめ

疑似クラスを使って特定の要素を指定する方法は、種類が多いため一見覚えることが多く見えますが、基本は、n番目のnth-child(n)とnth-of-type(n)です。
まずは、n番目の基本的な使い方と注意すべき違いを理解しておくことで、いろいろな場面で使いまわすことができます。

疑似クラスをうまく使いこなせると、CSSのコードをより少ない量で簡潔に書けるようになります。
ぜひ、疑似クラスを使ったCSSデザインにトライしてみてください。