:nth-of-type() pseudo-classes

概要

特定の要素型（タグ名）の中での位置に基づいてスタイルを適用するセレクターです。:nth-child()がすべての兄弟をカウントするのに対し、:nth-of-type()は同じ型の兄弟のみをカウントします。:first-of-type、:last-of-type、:only-of-typeも含まれ、混在した要素構造でのスタイリングに有用です。

対応ブラウザ

基本構文

p:first-of-type {
  font-size: 1.2em;
}
article p:nth-of-type(2) {
  text-indent: 1em;
}
img:only-of-type {
  display: block;
  margin: 0 auto;
}

実務での使いどころ

• 記事内の特定段落のスタイリング

  記事の最初の段落にリード文スタイルを適用し、2番目以降の段落に字下げを設定します。

注意点

アクセシビリティ

• 視覚的に目立たせた最初の段落が、文書構造のセマンティクスと一致していることを確認してください。

参考リンク

• MDN Web Docs — :nth-of-type() pseudo-classes