CSS 参考マニュアル

CSS @ルール(RULES)

CSS 属性全書

CSS3 :nth-of-type()セレクタ

オンラインサンプル

指定されたp要素が同種の要素の中で第2同じ階層の兄弟要素の背景色：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>基本的なチュートリアル(oldtoolbag.com)</title>/title>　
<style>　
/*　奇数段　*/
p:nth-of-type(2n+1)　{
　　color:　red;
}
/*　偶数段　*/
p:nth-of-type(2n)　{
　　color:　blue;
}
/*　第一段　*/
p:nth-of-type(1)　{
　　font-weight:　bold;
}
/*　第二段　*/
p:nth-of-type(2)
{
　　　　background:#ff0000;
}
</style>
</head>
<body>
<div>
　　<div>この段落はカウントに参加しません。</div>
　　<p>これは第一段。</p>/p>
　　<p>これは第二段。</p>/p>
　　<div>この段落はカウントに参加しません。</div>
　　<p>これは第三段。</p>/p>
　　<p>これは第四段。</p>/p>
</div>
</body>
</html>

テストして見て‹/›

定義と用法

:nth-of-type(　<nth>　)
　where　
<nth>　=　<an-plus-b>　|　even　|　odd

:nth-of-type(n)選択子は、同タイプの中で第n個の同级兄弟要素を一致させます。

nは数字、キーワード、または公式であります。

ヒント: 参照してください :nth-child() 選択子。この選択子は、親要素内の第n個の子要素を一致させます。Look at the :nth-child() 。

ブラウザの互換性

テーブルの数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

選択子
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

例 1

奇数と偶数は、インデックスが奇数または偶数の（最初の子ノードが）子要素に一致するキーワードとして使用できます。1)

ここでは、奇数と偶数のp要素に異なる背景色を指定しています：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>基本的なチュートリアル(oldtoolbag.com)</title>/title>　
<style>　
p:nth-of-type(odd)
{
　　　background:#ff0000;
}
p:nth-of-type(even)
{
　　　background:#0000ff;
}
</style>
</head>
<body>
<div>
　　<p>これは第一段。</p>/p>
　　<p>これは第二段。</p>/p>
　　<p>これは第三段。</p>/p>
　　<p>これは第四段。</p>/p>
</div>
</body>
</html>

テストして見て‹/›

例 2

公式（an+ b）.説明：aはループの大きさを表し、Nはカウンタ（0から始まる）であり、bはオフセットです。

ここでは、すべてのインデックスが3の倍数のp要素に背景色を指定しました：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>基本的なチュートリアル(oldtoolbag.com)</title>/title>　
<style>　
p:nth-of-type(3n+0)
{
　　　　background:#ff0000;
}
</style>
</head>
<body>
<h1>これはタイトル</h1>
<p>第一の段落。</p>/p>
<p>第二の段落。</p>/p>
<p>第三の段落。</p>/p>
<p>第四の段落。</p>/p>
<p>第五の段落。</p>/p>
<p>第六の段落。</p>/p>
<p>第七の段落。</p>/p>
<p>第八の段落。</p>/p>
<p>第九の段落。</p>/p>
<p><b>注意:</b>/b>　Internet　Explorer　8　およびより古いバージョンのブラウザでは:nthをサポートしていません-last-child()選択子.</p>
</body>
</html>

テストして見て‹/›

完全なCSS選択子リファレンスマニュアル

CSS ファンクション（Functions）CSS セレクタ全書