開発者ドキュメント

CSS疑似クラスの比較：n番目の子とn番目のタイプ

getdocs

序章

CSSには、アプリのスタイルを簡単に設定するのに役立ついくつかの疑似クラスがあります。 多くのオプションがあることは素晴らしいことですが、どの疑似クラスを使用し、それが実際に何をするのかを知ることも混乱を招く可能性があります。 ここでは、CSSのnth-childとnth-of-typeの疑似クラスを見て、それぞれをいつ使用するか、実際の違いを理解します。

nth-childおよびnth-of-typeCSS疑似クラスは、DOM内の位置に基づいて要素を選択するため、他のタイプの疑似クラスと比較して興味深いものです。 一部の疑似クラスは要素の特定の状態を選択しますが（例： ホバー、アクティブ、ターゲット疑似クラス）、nth-child、nth-of-typeは、マークアップの構造に関係しています。

前提条件

HTMLの設定

nth-childとnth-of-typeの違いを理解するために、最初にHTMLを作成して、何をスタイリングするかを理解しましょう。

Webページに、ヘッダー（<h1>、<h3>）要素と段落（<p>）要素が混在するセクションがあるとします。

<article>
  <h1>Here's a Header</h1>
  <p>I'm a paragraph with all kinds of information.</p>
  <p>Let's add another paragraph for fun.</p>
  <p>yadda yadda yadda</p>
  <p>blah blah blah</p>
  <p>yadda yadda yadda</p>
  <h3>Here's a Subheader</h3>
  <p>blah blah blah</p>
  <p>And maybe just one more.</p>
</article>

このマークアップは次のようになります。

合計で、親として<article>要素があり、9つの子要素があります。1つは<h1>、1つは<h3>、7つは<p>タグです。

nth-childおよびnth-of-type構文

nth-childおよびnth-of-type疑似クラスに渡すことができる値にはいくつかのオプションがあります。 ここではnth-childを使用していますが、nth-of-typeに置き換えることもできます。

CSSのnth-child疑似クラスを使用する

nth-child疑似クラスには、考慮すべき2つの重要なコンポーネントがあります。

上記のHTML例のCSSスタイルシートに移動すると、段落要素を選択して、次のようにフォントの色をmaroonにすることができます。

article p {
  color: maroon;
}

ただし、他のすべての段落要素を黄色がかった色にしたい場合を考えてみましょう。 nth-child疑似クラスを適用して、段落である他のすべての子要素にのみ新しい色を適用できます。

article p:nth-child(odd) {
  color: goldenrod;
}

段落の色が変わりましたが、サブヘッダーの後に何が起こったかに気づきましたか？ あずき色を繰り返した後、黄色に戻しました。 それが起こった理由を見てみましょう。

nth-childで選択された要素の決定

上記の例では、p:nth-child(odd)スタイルに一致する段落は、次の要件をこの順序で満たす必要があります。

子が奇数か偶数かを判断するのは、タイプ固有ではありません。 つまり、奇数/偶数チェックは、選択されているものの親要素（段落要素）のすべての子を調べてから、奇数要素と見なされるすべての段落を探します。

黄色のフォントスタイルが適用されている段落は「奇数」の子要素であり、段落（<p>）要素です。 これが、サブヘッダーの後の段落がデフォルトのあずき色になってしまう理由を説明しています。実際には「偶数」の子です。

CSSのnth-of-type疑似クラスを使用する

nth-of-typeは、nth-child疑似クラスと非常によく似ています。 主な違いは、他のロジックをチェックする前に、選択される要素のタイプを具体的に考慮することです。

上記の例を使用してみましょうが、代わりにnth-of-typeを適用してください。

<article>
  <h1>Here's a Header</h1>
  <p>I'm a paragraph with all kinds of information.</p>
  <p>Let's add another paragraph for fun.</p>
  <p>yadda yadda yadda</p>
  <p>blah blah blah</p>
  <p>yadda yadda yadda</p>
  <h3>Here's a Subheader</h3>
  <p>blah blah blah</p>
  <p>And maybe just one more.</p>
</article>

article p {
  color: maroon;
}

article p:nth-of-type(odd) {
  color: goldenrod;
}

デフォルトの色はまだ栗色ですが、現在は奇数の段落要素のみを選択しています。

要素が次の要件を満たしている場合、スタイルが適用されるようになりました。

注釈を付けてこれをもう一度見ると、これらがどのように選択されているかが少し明確になります。

ヘッダー（<h1>、<h3>）は、要素タイプによって具体的に選択しているため、nth-of-typeではまったく考慮されません。 この場合、<p>要素のみを考慮します。

nth-childとnth-of-typeのどちらを使用するかは、最終的にはスタイリングの目標によって異なります。

原則として、エレメントの種類に関係なくセレクターの間隔を選択する場合は、nth-childを使用してください。 ただし、特定のタイプのみを選択し、そこから間隔選択を適用する場合は、nth-of-typeを使用します。

結論

nth-childおよびnth-of-typeセレクターは、どちらも優れたブラウザーサポートを備えています。 詳細については、CanIUse.comのnth-childおよびnth-of-typeを確認してください。

HTML5マークアップ言語のより包括的なレビューについては、シリーズ「HTMLでWebサイトを構築する方法」を参照してください。

モバイルバージョンを終了