:nth-of-type()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

試してみましょう

構文

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

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

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

基本的な例

HTML

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

CSS

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

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

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

/* これは 2n+1 であり、かつ fancy のクラスを持つ要素に一致するので、第 3 段落に一致します。
2 番目の段落は fancy というクラスを持っていますが、 :nth-of-type(2n+1) ではないので一致しません。 */
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

結果

メモ: このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように :nth-of-type の位置クラスに基づいて要素に CSS を適用することができます。

仕様書

Specification
Selectors Level 4
# nth-of-type-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報