大阪のホームページ制作会社 株式会社TREVO
技術ブログ

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

2019.11.25.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

よく表やリストで背景色が交互に入れ替わっているのを見かけますが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)になります。

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり