CSSで:nth-child :nth-of typeを使って要素の順番を表す方法とその違い

同じような要素が並んでいるときに、CSSで並ぶ順番に応じてスタイルを適用する方法を知っていますか？

nth-childやnth-of-childを使って、CSSで順番を指定してスタイルを適用する手順を解説します。

htmlでクラス指定したり複雑な手順をやらずに、シンプルなコーディングができるようになります。

目次

１．CSSで:nth-child :nth-of typeを使って要素の順番を表す方法とその違い
２．CSSで:nth-childを使って要素の順番を表す方法
３．CSSで:nth-of-typeを使って要素の順番を表す方法
４．First-childとlast-childの使い方

１．CSSで:nth-child :nth-of typeを使って要素の順番を表す方法とその違い

同じような要素が並んでいるときに、CSSのみで順番を指定してスタイルを適用するやり方を解説します。

「htmlですべての要素にクラスなどを指定してからCSSでスタイルを適用するのは複雑と思う」「繰り返し要素にアクセスする」場合などに有効です。

下記の疑似セレクターを使うと、要素のスタイルを適用することが出来ます。

①　:nth-child(X)
②　:nth-of-type(X)
③　:first-child
④　:last-child

①　:nth-child(X) ②　:nth-of-type(X)は、同じような要素が並んでいる場合に、X番目の要素にスタイルを適用したい場合などに使います。

カッコ（　）の中にスタイルを適用したいX番目の数字を入れることによって、その数字に一致するX番目の要素にスタイルを適用することが出来ます。

ただし、①　:nth-child(X)　 ②　:nth-of-type(X)には、少し使い方に違いがあります。

①　:nth-child(X) は、要素の形によらず並んでいる順番に応じてスタイルを適用します。

②　:nth-of-type(X)は、要素の形が同じ要素を選んでその中の順番に応じてスタイルを適用します。

少し解りにくいので、次章以降で詳細は説明いたします。

③　:first-childは、同じような要素が並んでいる場合の一番はじめの要素を指します。

はじめの要素にスタイルを適用するときに使います。

④　:last-childは、同じような要素が並んでいる場合に一番最後の要素を指します。

最後の要素にスタイルを適用するときに使います。

はじめや最後の要素は指定することが多いので、指定し易いようになっています。

２．CSSで:nth-childを使って要素の順番を表す方法

<div>要素内【ex. nth-childクラス】に、同じような要素【ex. 5個の<span>要素】がhtmlで並んでいる場合で説明します。

例題

【目標のスタイル】
文字の色を順番に応じて変えて表示させます。

１番目：赤
２番目：青
３番目：黃
４番目：緑
５番目：トマト色

上記のように、順番に応じて文字色を指定するために、

CSSでは＜span＞要素に、span:nth-child(X)のXに要素の順番を入れて、それぞれの色指定をします。

<div class="nth-child">
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.nth-child{
  span:nth-child(1){
      color:red;
    }
  span:nth-child(2){
      color:blue;
    }
  span:nth-child(3){
      color:yellow;
    }
  span:nth-child(4){
      color:green;
    }
  span:nth-child(5){
      color:tomato;
    }
}

記述の仕方は、

対象の要素：nth-child(X)

という表現になります。

ここでは、span:nth-child(X)

実行結果

期待通りになっています。

※ちょっと豆知識（１）

異なる要素が混在している場合

<div>要素内【ex. nth-childクラス】に、はじめに<h2>要素があり、続いて同じような要素【ex. 5個の<span>要素】が並んでいる場合を説明します。

<div class="nth-child">
  <h2>nth-child</h2>
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.nth-child{
  span:nth-child(1){
      color:red;
    }
  span:nth-child(2){
      color:blue;
    }
  span:nth-child(3){
      color:yellow;
    }
  span:nth-child(4){
      color:green;
    }
  span:nth-child(5){
      color:tomato;
    }
}

実行結果
上段：同じような要素のみの場合
下段：異なる要素<h2>が混在している場合

基本の考え方
　:nth-child(X) は、要素の形によらず並んでいる順番に応じてスタイルを適用します。

htmlの一行目は、<h2>要素です。
CSSではspan:nth-child(1)に対応し<span>要素にスタイルを適用しているので色はつきません。

htmlの二行目は、span:nth-child(2)に対応し<span>要素です。
CSSの二番目の<span>要素のスタイルが適用されるので、青になります。

以降、htmlの五行目の<span>要素まで、スタイルが適用されます。

htmlの六行目は、スタイルの指定がされていないので、色がつきません。

３．CSSで :nth-of-typeを使って要素の順番を表す方法

<div>要素内【ex. nth-of-typeクラス】に、同じような要素【ex. 5個の<span>要素】がhtmlで並んでいる場合で説明します。

例題

【目標のスタイル】
文字の色を順番に応じて変えて表示させます。

１番目：赤
２番目：青
３番目：黃
４番目：緑
５番目：トマト色

上記のように、順番に応じて文字色を指定するために、

CSSでは＜span＞要素に、span:nth-of-type(X)のXに要素の順番を入れて、それぞれの色指定をします。

<div class="nth-of-type">
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.nth-of-type{
  span:nth-of-type(1) {
      color: red;
    }
  span:nth-of-type(2) {
      color: blue;
    }
  span:nth-of-type(3) {
      color: yellow;
    }
  span:nth-of-type(4) {
      color: green;
    }
  span:nth-of-type(5) {
      color: tomato;
    }
}

記述の仕方は、

対象の要素：nth-of-type(X)

という表現になります。

ここでは、span:nth-of-type(X)

実行結果

期待通りになっています。

※ちょっと豆知識（２）

異なる要素が混在している場合

<div>要素内【ex. nth-of-typeクラス】に、はじめに<h2>要素があり、続いて同じような要素【ex. 5個の<span>要素】が並んでいる場合を説明します。

:nth-child(X)同様の配置です。

<div class="nth-of-type">
  <h2>nth-of-type</h2>
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.nth-of-type{
  span:nth-of-type(1) {
      color: red;
    }
  span:nth-of-type(2) {
      color: blue;
    }
  span:nth-of-type(3) {
      color: yellow;
    }
  span:nth-of-type(4) {
      color: green;
    }
  span:nth-of-type(5) {
      color: tomato;
    }
}

実行結果
上段：同じような要素のみの場合
下段：異なる要素<h2>が混在している場合

基本の考え方
　:nth-of-type(X)は、要素の形が同じ要素を選んでその中の順番に応じてスタイルを適用します。

htmlの一行目は、<h2>要素です。
CSSではスタイルを適用しているものがなく色はつきません。

htmlの二行目は、span:nth-of-type(1)に対応し<span>要素です。
nth-of-typeは、要素の形が同じ要素を選んで適用します。
CSSの一番目の<span>要素のスタイルが適用されるので、赤になります。
の表現

以降、htmlの六行目の<span>要素まで、要素の形が同じなのでスタイルが適用されます。

※ちょっと豆知識（３）

偶数奇数を表示する方法

偶数番目、奇数番目の要素を指定するのに便利な表現方法があります。

（１）even, oddを使う表現

:nth-child(X), :nth-of-type(X) 両方に使える表現方法です。

偶数番目の要素を指定する場合：ex. nth-of-type(even){　}

奇数番目の要素を指定する場合：ex. nth-of-type(odd){　}

例）偶数番目の要素を赤、奇数番目の要素を青にするコーディング。

<div class="even">
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.even {
  span:nth-of-type(odd) {
      color: red;
    }
  span:nth-of-type(even) {
      color: blue;
    }
  }
}

実行結果

（２）2n, 2n+1を使う表現

:nth-child(X), :nth-of-type(X) 両方に使える表現方法です。

偶数番目の要素を指定する場合：ex. nth-of-type(2n){　}

奇数番目の要素を指定する場合：ex. nth-of-type(2n+1){　}

例）偶数番目の要素を赤、奇数番目の要素を青にするコーディング。

  <div class="n-2">
    <span>child1</span>
    <span">child2</span>
    <span>child3</span>
    <span>child4</span>
    <span>child5</span>
  </div>

.n-2 {
  span:nth-child(2n+1) {
      color: red;
    }
  span:nth-child(2n) {
      color: blue;
    }
  }
}

実行結果

【参考】

＊整数倍の順番を指定するには、

３倍なら、3n
５倍なら、5n

と指定します。

４．First-childとlast-childの使い方

　:first-childは、同じような要素が並んでいる場合の一番はじめの要素を指します。

　:last-childは、同じような要素が並んでいる場合に一番最後の要素を指します。

はじめと最後の要素にスタイルを適用するときに使います。

<div>要素内【ex. first-lastクラス】に、同じような要素【ex. 5個の<span>要素】がhtmlで並んでいる場合で説明します。

はじめ：赤
最後：トマト色

上記のように、順番に応じて文字色を指定するために、

CSSでは＜span＞要素に、span:first-child, span:last-childで、それぞれの色指定をします。

<div class="first-last">
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.first-last {
  span:first-child {
      color: red;
    }
  span:last-child {
      color: tomato;
    }
}

実行結果

※ちょっと豆知識（４）

異なる要素が混在している場合（１）

<div>要素内【ex. first-lastクラス】に、はじめに<h2>要素があり、続いて同じような要素【ex. 5個の<span>要素】が並んでいる場合を説明します。

<div class="first-last">
  <h2>first-child</h2>
  <span>child1</span>
  <span">child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
</div>

.first-last {
  span:first-child {
      color: red;
    }
  span:last-child {
      color: tomato;
    }
}

実行結果

htmlの一行目は、<h2>要素です。
CSSではspan:first-childは<span>要素にスタイルを適用しているので色はつきません。

htmlの最終行は、span:last-childに対応して、<span>要素です。
CSSの最終行の<span>要素のスタイルが適用されるので、トマト色になります。

異なる要素が混在している場合（２）

<div>要素内【ex. first-lastクラス】に、最終行に<h2>要素があり、続いて同じような要素【ex. 5個の<span>要素】が並んでいる場合を説明します。

<div class="first-last">
  <span>child1</span>
  <span>child2</span>
  <span>child3</span>
  <span>child4</span>
  <span>child5</span>
  <h2>last-child</h2>
</div>

.first-last {
  span:first-child {
      color: red;
    }
  span:last-child {
      color: tomato;
    }
}

実行結果

htmlの一行目は、span:first-childに対応していて<span>要素です。
CSSではfirst-childは<span>要素にスタイルを適用しているので赤になります。

htmlの最終行は、<h2>要素です。
CSSの最終行span:last-childは<span>要素のスタイルが適用されるので、色はつきません。

５．まとめ

nth-childやnth-of-childの使い方を解説致しました。

今回の説明を理解して、シンプルなコーディングをやってみてください。

参考にしてもらえれば幸いです。

最後まで読んでいただきありがとうございます。

説明できる内容は限られていますが、極力正確に伝えるように心がけました。

足りない部分、適切でない部分、補足などが有りましたらご指摘等お願いいたします。

Copyright–Seiji Nakamura, 2024 All Rights Reserved.