CSSの:nth-child(n)の基本的な使い方

CSS3から定義された:nth-child(n)は擬似クラスの一種です。

１つの要素に隣接している小要素の指定した何番目かの要素にスタイルを適用するものです。この擬似クラスを使用することで、指定した順番にある要素や、奇数や偶数でのスタイルの適用が可能になります。

CSSの:nth-child(n)の基本的な使い方

基本的な形は以下の通りです。Eの親要素のn番目の小要素にプロパティを適用します。nには、何番目かを指定する整数、偶数や奇数、数式を指定して使用します。

E:nth-child(n) {プロパティ名:値;}

実際に見て行ってみましょう。以下のようなリストを用意しました。

HTML

<ol>
<ul class="sample">
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
</ul>
</ol>

CSSを以下のように指定します。nには、3と入れてみました。プロパティは背景色を赤にするデザインを指定しました。

ul.sample li:nth-child(3) {background-color:red;}

表示サンプルです。指定した通り3行目の要素のみ背景色が赤くなりました。

次は、奇数を表すoddをnに指定してみました。偶数の場合はevenになります。

ul.sample li:nth-child(odd) {background-color:red;}

表示サンプルです。偶数の行だけ背景色が赤くなりました。