CSS3

：

疑似クラス

：

:nth-child()

　編集：2022.07.09 by T.A.

[Edge]○。→●、mdn

指定番目の子要素。

E:nth-child(値)

E 該当させる要素。

値

¶整数、キーワード、式。

キーワード：
`even`	偶数。
`odd`	奇数。

式：

An+B [of S]?

n は 0 からあてがわれる。

各同胞群ごとに、その中で［選択子リストS に合致するもの］のうち、

A×n + B 個目　…n ≧ 0

の要素を表現する。

of S が省略された場合の既定の S は、*|* になる。

この節、および後続の節に現れる An+B 記法とその解釈は、CSS Syntax Module [CSS3SYN] にて定義される。

注記：この目的においては、要素のリストは 1 から数えることに注意。例えば、要素の最初の子は :nth-child(2n+1) に合致することになる ― n＝0 のときの式は 1 に評価されるので。

この選択子は、例えば、テーブル内の行を飛び飛びに選択したり、段落のテキスト色を一定周期で順繰りに変えていく用途に利用できる。

:nth-child(even)   /* 2, 4, 6, … 個目の要素を表現する */
:nth-child(10n-1)  /* 9, 19, 29, … 個目の要素を表現する */
:nth-child(10n+9)  /* 同じ */
:nth-child(10n+-1) /* 構文が妥当でないので無視される */

注記： :nth-child() 疑似クラスの詳細度は、疑似クラス 1 個の詳細度、および［選択子リスト引数を成す各複体選択子の詳細度のうち最高のもの（引数が無ければ 0）］を足した結果になる。§ 選択子の詳細度の計算法を見よ。したがって、:nth-child(An+B of S) の詳細度は、S:nth-child(An+B) と正確に同じになる ― ふるまいにおいては相違するが（下の例を見よ）。

引数に選択子も渡せば、その選択子に合致するものから、N 個目の要素を選択できる。例えば、次の選択子は、"important" クラスに属するリストアイテムのうちの、最初の 3 個に合致する：

:nth-child(-n+3 of li.important)

これは、引数に与えた選択子を，次の様に関数の外側に出したものとは異なることに注意：

li.important:nth-child(-n+3)

この選択子は、単に最初の 3 個のリストアイテムのうち， "important" クラスに属するものを選択する。

以下のCSSが組み込んであります：

<SPAN class=Test>テスト<SPAN>SPAN1</SPAN><SPAN>SPAN2</SPAN><SPAN>SPAN3</SPAN></SPAN><BR>
<SPAN class=Test>テスト<B>B1</B><B>B2</B><B>B3</B></SPAN><BR>

<SPAN class=Test2>テスト<B>B1</B><B>B2</B><B>B3</B><B>B4</B></SPAN><BR>

<SPAN class=Test3_0>テスト<B>B1</B><B>B2</B><B>B3</B><B>B4</B><B>B5</B><B>B6</B><B>B7</B></SPAN><BR>

<SPAN class=Test3>テスト<B>B1</B><B>B2</B><B>B3</B><B>B4</B><B>B5</B><B>B6</B><B>B7</B></SPAN><BR>

<SPAN class=Test4>テスト<B>B1</B><B>B2</B><B>B3</B><B>B4</B><B>B5</B><B>B6</B><B>B7</B></SPAN><BR>

テスト

別画面に表示させて。

HTML：

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>CSS3：テスト</TITLE>
<STYLE>
SPAN:nth-child(1)	{
	outline:2px solid #f00;
	background-color:yellow;
}
</STYLE>
</HEAD>
<BODY>
<DIV><SPAN>SPAN要素<B>B要素</B></SPAN>だっちゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。
</DIV>
<DIV><SPAN>SPAN要素<B>B要素</B></SPAN>だっちゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。
</DIV>
<DIV>DIV要素<SPAN>SPAN要素<B>B要素</B></SPAN>だ<B>っち</B>ゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。
</DIV>
<SPAN>SPAN要素<B>B要素</B></SPAN>
<P> </P>
あ
<P></P>
<INPUT max=10 type=number><BR>
<PROGRESS value="0.5"></PROGRESS><BR>
<INPUT type=radio required name=Test1>
<INPUT type=radio name=Test1><BR>
<SELECT >
 <OPTION>OPTION要素１
 <OPTION selected>OPTION要素２
 <OPTION>OPTION要素３
</SELECT><BR>
<SELECT required>
 <OPTION>OPTION要素１
 <OPTION selected>OPTION要素２
 <OPTION>OPTION要素３
</SELECT><BR>
<AUDIO id=IdAUDIO src="../Sample/PCOto.mp3" controls></AUDIO><BR>
<SCRIPT>
IdAUDIO.muted=true;
</SCRIPT>
<A href="#Aテスト">A要素</A><BR>
<A href="#Aテスト2">A要素2</A><BR>
<DIV lang="de">DIV要素</DIV>
<FORM>
<INPUT type=radio name=Test>
<INPUT type=radio name=Test>
</FORM>
<INPUT value="ここに入力"><BR>
<INPUT value="ここに入力" readonly><BR>
<DIV>DIV要素ですんちゃ、<SPAN>SPAN要素</SPAN>だっちゃsperl<BR>これか<SPAN>SPAN要素</SPAN>らもよろしくお願いします。<BR>きょうは晴れです。</DIV>
<SPAN>SPAN要素</SPAN>This as pen.
<BUTTON>BUTTON要素</BUTTON>
<BUTTON disabled>BUTTON要素</BUTTON><BR>
<A id=Aテスト>A要素ジャンプ先</A><BR>
<A id=Aテスト2>A要素<SPAN>SPAN要素ジャンプ先</SPAN></A><BR>
</BODY>
</HTML>

ここに表示

¶[Edge]○：ルート要素？から数えて

ここに表示

スクリプト：

スクリプト：

表示内容：