ホームページ制作 大阪 | 目標を実現するweb制作会社、株式会社トレボ

TREVOのスタッフブログ

Blog
2019.11.25.

偶数、奇数、指定した要素にだけcssを適用させる方法

よく表やリストで背景色が交互に入れ替わっているのを見かけますがCSSの擬似クラスを使えば無駄なclassを追加する事無く簡単に作成できます。

奇数の個所にスタイルを適用

html

<ul class="sample1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

css

.sample1 li:nth-child(odd){
	background: #C5FAD2;
}

結果

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

奇数に設定する場合はnth-child(odd)を使います。

偶数の個所にスタイルを適用

html

<ul class="sample2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

css

.sample2 li:nth-child(even){
	background: #C5FAD2;
}

結果

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

偶数に設定する場合はnth-child(even)を使います。

上から指定した個所にスタイルを適用

上から2番に指定する場合

html

<ul class="sample3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

css

.sample3 li:nth-child(2){
	background: #C5FAD2;
}

結果

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

上から2番に指定するcssはnth-child(2)になります。

下から指定した個所にスタイルを適用

下から2番に指定する場合

html

<ul class="sample4">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

css

.sample4 li:nth-last-child(2){
	background: #C5FAD2;
}

結果

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

下から2番に指定するcssはnth-last-child(2)になります。

ホームページ制作 大阪 | 目標を実現するweb制作会社