1

リストやテーブルなどで擬似クラス:nth-child(n)を使って一定の規則に従い背景色などを変える

リストやテーブルなどで擬似クラス:nth-child(n)を使って一定の規則に従い背景色などを変える

 

リストやテーブルのセルの可視性を良くするために、li,tr,th,tdなどの背景色を交互に変える手法がありますが、CSSの擬似クラスである「:nth-child(n)」を利用してそれを実現することができます。

 

デモサンプル

1.<li>タグの場合

指定の順番の要素に指定する場合

:nth-child(n)

▼3番目の要素にだけ背景色グレーを指定

 3番目の要素にだけ背景色グレーを指定

 

偶数に指定する場合

:nth-child(even)
:nth-child(2n)

▼2番目,4番目,6番目…etc (偶数に指定する場合)

2番目,4番目,6番目...etc (偶数に指定する場合)

 

奇数に指定する場合

:nth-child(odd)
:nth-child(2n+1)

▼1番目,3番目,5番目…etc (奇数に指定する場合)

▼1番目,3番目,5番目...etc (奇数に指定する場合)

 

2.<tr>,<th>,<td>タグの場合

偶数に指定する場合(行)

tr:nth-child(2n)

▼<tr>タグに指定します。

偶数に指定する場合(行)

 

偶数に指定する場合(列)

th:nth-child(2n)
td:nth-child(2n)

▼<th>,<td>タグに指定します。

 <th>,<td>タグに指定します。

 

3.IE8以下への対応方法

:nth-child()IE8以下で未対応のですが、jQueryを読み込み「addClass」で定義することで対処が可能です。

jQuery本体を読み込み、.addClassで任意のクラス名を定義します。(サンプルは「li_even」を定義)

 CSSに定義するクラス名で背景色を指定

 

 すると、IE8以下でもこの「:nth-child()」が対応されて背景色が変わります。

背景色だけに限らず、指定した「一定の規則に従って」CSSを適用することが出来ますので様々な指示に活用できますね。

 




One Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > リストやテーブルなどで擬似クラス:nth-child(n)を使って一定の規則に従い背景色などを変える