nth-child（）および：nth-​​of-type（）pseudoクラスをどのように使用しますか？

nth-child（）および：nth-​​of-type（）pseudoクラスをどのように使用しますか？

:nth-child()および:nth-of-type()擬似クラスのCSSは、親コンテナの位置に基づいて要素を選択するために使用されます。これは、それぞれの使用方法の詳細な見方です。

使用：nth-​​child（）

:nth-child() pseudo-classは、タイプに関係なく、同じ親のすべての兄弟の間の位置に基づいて要素を選択します。構文は次のとおりです。

 <code class="css">:nth-child(an b)</code>

ここでaとbは整数であり、 nは0から始まるカウンターです。一般的なパターンには以下が含まれます。

<li> :nth-child(2) ：2番目の子要素を選択します。 <li> :nth-child(odd) ：すべての奇数の子要素を選択します。 <li> :nth-child(even) ：偶数の子要素をすべて選択します。 <li> :nth-child(3n) ：3番目の子要素をすべて選択します（3、6、9など）。 <li> :nth-child(3n 1) ：最初の（1、4、7など）から始まる3番目の子要素ごとに選択します。

使用例：

 <code class="html"><ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul></code>

 <code class="css">li:nth-child(2) { background-color: yellow; }</code>

これにより、2番目の<li>要素に黄色の背景が適用されます。

使用：nth-​​of-type（）

:nth-of-type() pseudo-classは似ていますが、同じタイプの兄弟間の位置に基づいて要素のみを選択します。構文は次のものと同じです:nth-child() ：

 <code class="css">:nth-of-type(an b)</code>

使用例：

 <code class="html"><ul> <li>First item</li> <p>Some text</p> <li>Second item</li> <p>More text</p> </ul></code>

 <code class="css">li:nth-of-type(2) { background-color: yellow; }</code>

これにより、2番目の<li>要素に黄色の背景が適用されますが、 <p></p>要素には影響しません。

CSSのnth-child（）と：nth-​​of-type（）の重要な違いは何ですか？

:nth-child()と:nth-of-type()の重要な違いは次のとおりです。

<li>

要素タイプの考慮事項：

<li> :nth-child()タイプに関係なくすべての子要素をカウントします。それは、すべての兄弟の間の要素の位置を考慮します。 <li> :nth-of-type()同じ要素タイプの兄弟のみをカウントします。それはその選択においてより具体的です。
<li>

セレクターの精度：

<li> :nth-child()すべての要素をカウントするため、特定のタイプの要素をターゲットにしている場合、それほど正確ではありません。 <li> :nth-of-type()使用すると、特定のシナリオでより効率的になる可能性のあるタイプごとに、より正確に要素をターゲットにすることができます。
<li>

使用シナリオ：

<li>使用:nth-child()タイプに関係なく、すべての兄弟間の位置に基づいて要素を選択する必要がある場合。 <li>使用:nth-of-type()同じタイプの兄弟の間の位置に基づいて要素を選択する場合。

使用する時期の例：nth-​​child（）versus：nth-​​of-type（）をWeb開発で提供できますか？

使用：nth-​​child（）例：

さまざまなタイプの要素のグリッドレイアウトがあり、要素タイプに関係なく3つの3つのアイテムをスタイリングしたいとします。

 <code class="html"><div class="grid"> <div>Item 1</div> <p>Item 2</p> <span>Item 3</span> <div>Item 4</div> <p>Item 5</p> <span>Item 6</span> </div></code>

 <code class="css">.grid :nth-child(3n) { background-color: lightblue; }</code>

この場合、 :nth-child(3n)要素の種類に関係なく、3番目のアイテム（項目3および項目6）ごとにスタイルをスタイルします。

使用：nth-​​of-type（）例：

同じグリッドレイアウトで毎秒<div>要素をスタイリングしたい場合：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;grid&quot;&gt; &lt;div&gt;Item 1&lt;/div&gt; &lt;p&gt;Item 2&lt;/p&gt; &lt;span&gt;Item 3&lt;/span&gt; &lt;div&gt;Item 4&lt;/div&gt; &lt;p&gt;Item 5&lt;/p&gt; &lt;span&gt;Item 6&lt;/span&gt; &lt;div&gt;Item 7&lt;/div&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;.grid div:nth-of-type(2n) { background-color: lightgreen; }&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この例では、 <code>:nth-of-type(2n) 2秒の<div>要素（項目4および項目7）ごとにスタイルをスタイルします。<h3>より良いパフォーマンスを得るために、nth-child（）および：nth-​​of-type（）を使用して、CSSセレクターを最適化するにはどうすればよいですか？</h3> <p>以下を使用してCSSセレクターを最適化するには<code>:nth-child()および:nth-of-type()より良いパフォーマンスのために、次の戦略を検討してください。

<li>

特異性とセレクターの効率：

<li>使用:nth-of-type()の代わりに:nth-child()特定のタイプの要素をターゲットにする必要がある場合。ブラウザは無関係な要素を処理する必要がないため、これはより効率的です。 <li>必要な限り具体的に具体的であるが、マッチングのオーバーヘッドを減らすために可能な限り一般的なものを維持します。
<li>

DOMトラバーサルを最小限に抑える：

<li>

組み合わせ:nth-child()または:nth-of-type()とクラスセレクターは、必要なDOMトラバーサルを減らすのに役立ちます。例えば：

 <code class="css">.list-item:nth-child(2) { /* Style properties */ }</code>

これは、クラス.list-itemの2番目の子供を対象としています。これは、すべての子供を検索するよりも効率的です。

<li>

深い巣を避ける：

<li>

深くネストされたセレクターは、パフォーマンスを遅くすることができます。使用:nth-child()または:nth-of-type()は、過度に特定のセレクターの必要性を回避するのに役立ちます。例えば：

 <code class="css">ul li:nth-child(2) { /* Instead of */ /* ul > li > ul > li:nth-child(2) */</code>

<li>

セレクターの複雑さを制限します：

<li>セレクターをシンプルに保ち、あまりにも多くの擬似クラスを組み合わせることを避けてください。たとえば、単一の:nth-child(2)擬似クラスと属性セレクターの複雑な組み合わせよりも優れたパフォーマンスを発揮する可能性があります。
<li>

CSS Preprocessorsを使用します。

<li> SASS以下のようなCSSプリプロセッサは、より保守可能で効率的なCSSの書き込みに役立ちます。複雑なセレクターを管理し、繰り返しを避け、間接的にパフォーマンスを向上させるのに役立ちます。

これらの戦略を実装することにより、 :nth-child()および:nth-of-type()の使用がパフォーマンスに最適化されるようにすることができます。