:nth-of-type()

:nth-of-type()CSS擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

/* 兄弟の <p> 要素の中で、
   3つおきに選択 */
p:nth-of-type(4n) {
  color: lime;
}

構文

nth-of-type 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

構文の詳しい説明は :nth-child を参照してください。

形式文法

:nth-of-type( <nth> )

where
<nth> = <an-plus-b> | even | odd

基本的な例

HTML

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p class="fancy">4th paragraph.</p>
</div>

CSS

/* 奇数の段落 */
p:nth-of-type(2n+1) {
  color: red;
}

/* 偶数の段落 */
p:nth-of-type(2n) {
  color: blue;
}

/* 最初の段落 */
p:nth-of-type(1) {
  font-weight: bold;
}

/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
p.fancy:nth-of-type(1) {
  text-decoration: underline;
}

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:nth-of-type の定義
草案 親を持たない要素も該当するよう追加。
Selectors Level 3
:nth-of-type の定義
勧告 初回定義。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:nth-of-type()Chrome 完全対応 1Edge 完全対応 12
補足
完全対応 12
補足
補足 Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Firefox 完全対応 3.5IE 完全対応 9
補足
完全対応 9
補足
補足 Internet Explorer treats all unknown elements (such as custom elements) as the same element type.
Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報