CSS疑似クラスの比較:n番目の子とn番目のタイプ
序章
CSSには、アプリのスタイルを簡単に設定するのに役立ついくつかの疑似クラスがあります。 多くのオプションがあることは素晴らしいことですが、どの疑似クラスを使用し、それが実際に何をするのかを知ることも混乱を招く可能性があります。 ここでは、CSSのnth-child
とnth-of-type
の疑似クラスを見て、それぞれをいつ使用するか、実際の違いを理解します。
nth-child
およびnth-of-type
CSS疑似クラスは、DOM内の位置に基づいて要素を選択するため、他のタイプの疑似クラスと比較して興味深いものです。 一部の疑似クラスは要素の特定の状態を選択しますが(例: ホバー、アクティブ、ターゲット疑似クラス)、nth-child
、nth-of-type
は、マークアップの構造に関係しています。
前提条件
- HTML5の一般的な知識。 HTML5マークアップ言語の包括的なレビューについては、シリーズ「HTMLでWebサイトを構築する方法」を参照してください。
- CSSの一般的な知識。 CSSの概要については、カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法のチュートリアルを参照してください。
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
に置き換えることもできます。
- :nth-child(2n + 3):このオプションにはいくつかの計算が必要です。 数字はあなた次第です。 変化するのは
n
です。 これにより、選択した要素が取得され、n
を0に設定して開始し、そこから増分します。 したがって、JavaScriptのfor
ループと同様に、n
の値を更新することにより、選択した要素を反復処理します:2(0)+3 = 3
、2(1)+3 = 5
、2(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;
}
ただし、他のすべての段落要素を黄色がかった色にしたい場合を考えてみましょう。 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;
}
デフォルトの色はまだ栗色ですが、現在は奇数の段落要素のみを選択しています。
要素が次の要件を満たしている場合、スタイルが適用されるようになりました。
- 要素は、article要素を親とする段落です。
- 上で選択した段落のうち、奇数の段落のみが選択されています。
注釈を付けてこれをもう一度見ると、これらがどのように選択されているかが少し明確になります。
ヘッダー(<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サイトを構築する方法」を参照してください。