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

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

:nth-child(n)

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

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

偶数に指定する場合

(1):nth-child(even)

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

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

(2):nth-child(2n)

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

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

奇数に指定する場合

(1):nth-child(odd)

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

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

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

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

• リスト1
• リスト2
• リスト3
• リスト4
• リスト5

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

tr:nth-child(n)

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

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

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

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