技術ブログ
よく表やリストで背景色が交互に入れ替わっているのを見かけますが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マーケティングなどのサービスをご紹介しています。