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

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

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

<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>
li {
  font-size: 20px;
  padding: 8px;
}

image2

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

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

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

ブラウザで確認すると、

image3

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

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

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

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

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

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

ブラウザで確認すると、

image4

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

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

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

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

ブラウザで確認すると、

image5

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

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

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

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

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

ブラウザで確認すると、

image6

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

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

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

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

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

ブラウザで確認すると、

image7

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

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

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

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

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

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

ブラウザで確認すると、

image8

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

first-childlast-childが効かない場合

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

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

<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>

ブラウザで確認すると、

image9

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

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

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

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

解決策

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

  • li タグ全体を div タグで囲む
  • first-childfirst-of-typelast-childlast-of-typeに変更する

を試してみてください。

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

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

<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-childlast-childが子要素全体を対象とするのに対して、first-of-typelast-of-typeは、同じセレクタ全体を対象とします。

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

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

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;
}

ブラウザで確認すると、

image10

狙った通りの背景色になりました。

テーブル作成時、一つ飛ばしで背景色をつけたい場合や、見出しを付けたい場合に便利ですので、ぜひ試してみてください。

ブログ一覧