:nth-of-type()

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

/* 兄弟の <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>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;
}

結果

仕様書

仕様書 状態 備考
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 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報