:nth-of-type(n) (その種類のn番目の要素) CSSセレクタの詳細とデモ

その種類のn番目の要素

任意の要素(種類)の中で指定番目の要素のみを選択します。
また、値に「even」、「2n」を指定すれば、偶数行のみ選択
値に「odd」、[2n-1」を指定すれば奇数行のみ選択することもできます。
※その他指定できる値の例「3n(3行単位)」「3n+1(3行+1行単位)」、「+3n-2(3行-2行単位)」、「-n+6」、「+6」

ブラウザのサポート状況

Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Google Chorme Safari Opera
× × ×

:nth-of-type(n)セレクタ のブラウザ動作デモ

※対応していないブラウザでは、正しく選択されません。

「em:nth-of-type(2)」値による動作デモ
デモでは、em要素のそれぞれの中で2番目の要素を選択していることが確認できます。

値を変更して動作デモをチェックできます

兄弟要素1 <span class=class> </span>
子要素1-1 <span> </span>
孫要素1-1-1 <span> </span>
子要素1-2 <em> </em>
兄弟要素2 <span> </span>
子要素2-1 <span> </span>
兄弟要素3 <span id=id class=class> </span>
子要素3-1 <span> </span>
孫要素3-1-1 <input type=checkbox checked="checked"> </input>
孫要素3-1-2 <input type=checkbox> </input>
孫要素3-1-3 <input type=checkbox disabled="disabled"> </input>
孫要素3-1-4 <input type=radio checked="checked"> </input>
孫要素3-1-5 <input type=radio> </input>
孫要素3-1-6 <input type=radio disabled="disabled"> </input>
孫要素3-1-7 <input type=text> </input>
孫要素3-1-8 <input type=text disabled="disabled"> </input>
子要素3-2 <span> </span>
孫要素3-2-1 <em rel="hogedesu"> </em>
孫要素3-2-2 <em rel="myhoge"> </em>
孫要素3-2-3 <em rel="myhogedesu"> </em>
孫要素3-2-4 <em rel="hoge"> </em>
孫要素3-2-5 <em rel="piyopiyo"> </em>
孫要素3-2-6 <em rel="hoge piyo"> </em>
孫要素3-2-7 <em rel="hoge-piyo"> </em>
孫要素3-2-8 <em rel="piyo-hoge"> </em>
孫要素3-2-9 <em rel="foo-bar"> </em>
孫要素3-2-10 <em rel="hello"> </em>
子要素3-3 <span> </span>
孫要素3-3-1 <a href="#"> </a>
孫要素3-3-2 <a href="http://www.w3.org/"> </a>
孫要素3-3-3 <a href="http://shopping-nekodama.xii.jp/rakuten/search.php?c=200162&q=CSS"> </a>
孫要素3-3-4 <a href="#id"> </a>
兄弟要素4 <em> </em>
子要素4-1 <span> </span>
孫要素4-1-1 <b> </b>
孫要素4-1-2 <span class=class> </span>
ひ孫要素4-1-2-1 <i> </i>
孫要素4-1-3 <i> </i>
ひ孫要素4-1-3-1 <span lang="en"> </span>
ひ孫要素4-1-3-2 <span lang="ja"> </span>
ひ孫要素4-1-3-3 <span lang="en-us"> </span>
子要素4-2 <b> </b>
兄弟要素5 <span> </span>
兄弟要素6 <em> </em>
子要素6-1 <span> </span>

CSSサンプルコード

#result em:nth-of-type(2){
  background: #fe9;
  outline: dotted 2px #f93;
  outline-offset:1px;
  color: #933;
  font-weight: bold;
  font-size: 12px;
}