HTML&CSS

【CSS】最初や最後、何番目などにスタイルを指定する方法

作成日：2021年06月27日

更新日：2022年12月27日

リストやボックスなど同様のコンテンツを制作している時、最初や最後の色を変えたいこと、ありませんか？

今回は、最初や最後、何番目などにスタイルを指定する方法を紹介します。

基本のコードは、以下になります。

html
<div>
  <li>1番目のリスト</li>
  <li>2番目のリスト</li>
  <li>3番目のリスト</li>
  <li>4番目のリスト</li>
  <li>5番目のリスト</li>
  <li>6番目のリスト</li>
  <li>7番目のリスト</li>
  <li>8番目のリスト</li>
  <li>9番目のリスト</li>
  <li>10番目のリスト</li>
</div>

css
li {
  font-size: 20px;
  padding: 8px;
}

最初のコンテンツのスタイルを変更する

最初のコンテンツのスタイルを変更するには、セレクタの後に、first-childを設定します。

css
li:first-child {
  background-color: green;
}

ブラウザで確認すると、

『1 番目のリスト』のみ背景色が変わりました。

注意していただきたいのが、セレクタと『:』の間にスペースを空けると、機能しなくなります。

例えば、li:first-childは機能しますが、li :first-childは機能しないので、ご注意ください。

最後のコンテンツのスタイルを変更する

最後のコンテンツのスタイルを変更するには、セレクタの後に、last-childを設定します。

css
li:last-child {
  background-color: blue;
}

ブラウザで確認すると、

『10 番目のリスト』のみ背景色が変わりました。

特定のコンテンツのスタイルを変更する

例えば、3 番目のコンテンツのスタイルを変更するには、セレクタの後に、nth-child(3)を設定します。

css
li:nth-child(3) {
  background-color: red;
}

ブラウザで確認すると、

『3 番目のリスト』のみ背景色が変わりました。

例えば、4 番目のコンテンツのスタイルを変更するには、セレクタの後に、nth-child(4)、8 番目のコンテンツのスタイルを変更するには、セレクタの後に、nth-child(8)を設定します。

最後から数えて、特定のコンテンツのスタイルを変更する

反対に、最後から数えて 3 番目のコンテンツのスタイルを変更するには、セレクタの後に、nth-last-child(3)を設定します。

css
li:nth-last-child(3) {
  background-color: orange;
}

ブラウザで確認すると、

最後から 3 番目である、『8 番目のリスト』のみ背景色が変わりました。

3 つおきにコンテンツのスタイルを変更する

3 つおきにコンテンツのスタイルを変更するには、セレクタの後に、nth-child(3n)を設定します。

『n』が倍数となります。

css
li:nth-child(3n) {
  background-color: yellow;
}

ブラウザで確認すると、

3 の倍数のコンテンツに背景色がつきました。

例えば、2 つおきにコンテンツのスタイルを変更するには、セレクタの後に、nth-child(2n)、4 つおきにコンテンツのスタイルを変更するには、セレクタの後に、nth-child(4n)を設定します。

5 番目のコンテンツから 2 つおきにスタイルを変更する

5 番目のコンテンツから 2 つおきにスタイルを変更するには、セレクタの後に、nth-child(2n+5)を設定します。

『+5』が、5 番目から始まりますよ、という意味です。

css
li:nth-child(2n + 5) {
  background-color: greenyellow;
}

ブラウザで確認すると、

5 番目のコンテンツから 2 つおきに、コンテンツの背景色が変わりました。

first-childやlast-childが効かない場合

first-childやlast-childが効かない場合は、子要素の中に別の要素が混じっている可能性があります。

例えば、li タグの上に、p タグを追加してみます。

css
<div>
  <p>リスト一覧</p>
  <li>1番目のリスト</li>
  <li>2番目のリスト</li>
  <li>3番目のリスト</li>
  <li>4番目のリスト</li>
  <li>5番目のリスト</li>
  <li>6番目のリスト</li>
  <li>7番目のリスト</li>
  <li>8番目のリスト</li>
  <li>9番目のリスト</li>
  <li>10番目のリスト</li>
</div>

ブラウザで確認すると、

first-childとlast-childの背景色がなくなりました。

また、特定の箇所のコンテンツに指定した背景色が一つずつずれているのがわかります。

これは、p タグが入ったことで、first-childやlast-childの対象が li から p へ変わってしまったことが原因です。

つまり、li:first-childやli:last-childが存在しなくなったので、li:first-childやli:last-childにスタイルを指定しても効果がないということです。

解決策

first-childやlast-childが効かない場合の解決策として、

li タグ全体を div タグで囲む
first-childをfirst-of-type、last-childをlast-of-typeに変更する

を試してみてください。

どちらか一方で構いません。

li タグ全体を div タグで囲むことにより、first-childやlast-childの対象が li になります。

css
<div>
  <p>リスト一覧</p>
  <div>
    <li>1番目のリスト</li>
    <li>2番目のリスト</li>
    <li>3番目のリスト</li>
    <li>4番目のリスト</li>
    <li>5番目のリスト</li>
    <li>6番目のリスト</li>
    <li>7番目のリスト</li>
    <li>8番目のリスト</li>
    <li>9番目のリスト</li>
    <li>10番目のリスト</li>
  </div>
</div>

また、first-childやlast-childが子要素全体を対象とするのに対して、first-of-typeとlast-of-typeは、同じセレクタ全体を対象とします。

つまり、first-of-typeとlast-of-typeは、li タグ全体の中で、はじめのコンテンツを終わりのコンテンツを指しています。

同様に、nth-child()をnth-of-type()、nth-last-child()をnth-last-of-type()へ変更します。

css
li:first-of-type {
  background-color: green;
}

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

li:nth-of-type(3) {
  background-color: red;
}

li:nth-last-of-type(3) {
  background-color: orange;
}

li:nth-of-type(2n + 5) {
  background-color: greenyellow;
}