ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.01.08  最終更新日:2021.07.20

CSS

【初心者の方向け】cssのnth-childの使い方・書き方メモ

こちらは初心者の方向けと書いていますが、自分でも忘れてしまうnth-childの書き方メモです。

基本のnth-child

下準備

今回は全て以下のHTMLを使用します。

このページで使用するHTML

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

n番目を指定するnth-child

CSS

n番目に対して、というnth-childの書き方は、以下の通りです。
例えば、3番目のliにスタイルを指定したい場合は、

li:nth-child(3) {
  background:#8fc3dc;
}

となります。

  • 1番目のli
  • 2番目のli
  • 3番目のli
  • 4番目のli
  • 5番目のli
  • 6番目のli
  • 7番目のli
  • 8番目のli
  • 9番目のli
  • 10番目のli

奇数、偶数を指定するnth-child

n番目に対して、というnth-childの書き方は、以下の通りです。
例えば、奇数と偶数のliにスタイルを指定したい場合は

CSS

奇数
li:nth-child(odd) {
  background:#8fc3dc;
}

以下のような結果になります。

  • 1番目のli
  • 2番目のli
  • 3番目のli
  • 4番目のli
  • 5番目のli
  • 6番目のli
  • 7番目のli
  • 8番目のli
  • 9番目のli
  • 10番目のli
偶数
li:nth-child(even) {
  background:#8fc3dc;
}

以下のような結果になります。

  • 1番目のli
  • 2番目のli
  • 3番目のli
  • 4番目のli
  • 5番目のli
  • 6番目のli
  • 7番目のli
  • 8番目のli
  • 9番目のli
  • 10番目のli

nの倍数を指定するnth-child

CSS

nの倍数に対して、というnth-childの書き方は、以下の通りです。
例えば、3の倍数のliにスタイルを指定したい場合は、

li:nth-child(3n) {
  background:#8fc3dc;
}
  • 1番目のli
  • 2番目のli
  • 3番目のli
  • 4番目のli
  • 5番目のli
  • 6番目のli
  • 7番目のli
  • 8番目のli
  • 9番目のli
  • 10番目のli

n番目以降を指定するnth-child

CSS

n番目以降に対して、というnth-childの書き方は、以下の通りです。
例えば、3番目以降のliにスタイルを指定したい場合は、

li:nth-child(n+3) {
  background:#8fc3dc;
}
  • 1番目のli
  • 2番目のli
  • 3番目のli
  • 4番目のli
  • 5番目のli
  • 6番目のli
  • 7番目のli
  • 8番目のli
  • 9番目のli
  • 10番目のli

n番目からn番目までを指定するnth-child

CSS

n番目からn番目まで、というnth-childの書き方は、以下の通りです。
例えば、3番目から7番目までのliにスタイルを指定したい場合は、

li:nth-child(n+3):nth-child(-n+7) {
  background:#8fc3dc;
}
  • 1番目のli
  • 2番目のli
  • 3番目のli
  • 4番目のli
  • 5番目のli
  • 6番目のli
  • 7番目のli
  • 8番目のli
  • 9番目のli
  • 10番目のli

以下のような箇所を指定する(◯n+▲)のnth-child

ちょっとわかりづらいタイトルになってしまいましたが、
以下のように、

2番目、5番目、8番目に対してスタイルを当てたい場合は、

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

以下のような記述になります。

li:nth-child(3n+2) {
  background:#8fc3dc;
}

最新記事