序章

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

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

前提条件

HTMLの設定

nth-childnth-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>

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

Markup with no pseudo-class applied

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

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

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

  • :nth-child(2n + 3):このオプションにはいくつかの計算が必要です。 数字はあなた次第です。 変化するのはnです。 これにより、選択した要素が取得され、nを0に設定して開始し、そこから増分します。 したがって、JavaScriptのforループと同様に、nの値を更新することにより、選択した要素を反復処理します:2(0)+3 = 32(1)+3 = 52(2)+3 = 7など。 この結果、3番目、5番目、7番目などが選択されます。 要素。
  • :nth-child(odd /even):文字列oddまたはevenを渡して、使用可能な奇数要素と偶数要素を選択できます。
  • :nth-child(3n)n変数を使用して数値を渡すこともできます。これにより、選択した要素の出現間隔が選択されます。 3が渡されると、3番目、6番目、9番目などが選択されます。 要素。
  • :nth-child(3)<^>: If you just pass a number (without the n), it will select that element from the DOM specifically. Passing 3`は、3番目に一致する要素のみを選択します。

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

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

  • 疑似クラスが適用される選択された要素。
  • 疑似クラスに渡される値。

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

article p {
  color: maroon;
}

Markup with no pseudo-class applied

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

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

Markup with the nth-child pseudo-class applied

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

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

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

  • それらは親要素の奇妙な子です
  • それらは段落要素です

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

Markup with the nth-child pseudo-class applied, plus annotations

黄色のフォントスタイルが適用されている段落は「奇数」の子要素であり、段落(<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;
}

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

Markup with the nth-of-type pseudo-class applied

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

  • 要素は、article要素を親とする段落です。
  • 上で選択した段落のうち、奇数の段落のみが選択されています。

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

Markup with the nth-of-type pseudo-class applied, plus annotations

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


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

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

結論

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

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