CSS3

：

疑似クラス

：

:nth-of-type()

　編集：2022.07.13 by T.A.

[Edge]○。→●、mdn

そのタイプで指定番目の子要素。

E:nth-of-type(値)

`E`	該当させる要素。
`値`	¶整数、 ¶キーワード［`even` \| `odd`］、 `An+B [of S]?`

疑似クラス記法 :nth-of-type(An+B) は、:nth-child(An+B of S) に合致するものと同じ要素たちを表現する ― ここで S は、合致させる要素に合致するような［名前空間の接頭辞と型選択子］である。例えば、HTML img 要素がこの疑似クラスに合致するかどうかを考えるとき、S は html|img になる（html に対する適切な名前空間は宣言済みとする）。

これにより、複数の画像を交替的に float 配置させられる：

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

【仮に、img を全称選択子（*）に置き換えたなら、各要素型ごとに個別に適用した結果の和集合を表現することになる。言い換えれば、*:nth-of-type(An+B) は、［ある型 E があって、E:nth-of-type(An+B) に合致するもの］すべてを表現する（:nth-child(An+B) とは異なる）。】

注記：要素の型が事前に既知ならば、この疑似クラスは、型選択子も伴う :nth-child() の利用に等価になる。すなわち、img:nth-of-type(2) は、*:nth-child(2 of img) と等価になる。

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

<SPAN class=Test>テスト<B>1</B><B>2</B><SPAN>3</SPAN><SPAN>4</SPAN><B>5</B><B>6</B></SPAN>

<SPAN class=Test>テスト<B>1</B><B>2</B><SPAN>3</SPAN><SPAN>4</SPAN><B>5</B><B>6</B></SPAN>

<SPAN class=Test>テスト<B>1</B><B>2</B><SPAN>3</SPAN><SPAN>4</SPAN><B>5</B><B>6</B></SPAN>

テスト

別画面に表示させて。

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-of-type(2)	{
	outline:2px solid #f00;
	background-color:yellow;
}
</STYLE>
</HEAD>
<BODY>
<DIV><SPAN>[SPAN要素]</SPAN>
</DIV>
<DIV>[DIV<SPAN>[SPAN要素]</SPAN>DIV]
</DIV>
<DIV>[DIV<SPAN>[SPAN要素]</SPAN>あああ<SPAN>[SPAN要素]</SPAN>DIV]
</DIV>
<TABLE>
 <TR><TH>TH要素：１<TD>TD要素：２<TD>TD要素：３
 <TR><TH>TH要素：４<TD>TD要素：５<TD>TD要素：６
 <TR><TH>TH要素：７<TD>TD要素：８<TD>TD要素：９
</TABLE>
<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]○：ルート要素からの子要素で、同じタイプの要素を数える

ここに表示

スクリプト：

スクリプト：

表示内容：