CSS を独学する旅の途中で、疑似セレクター:nth-child()(およびそれに関連するセレクター:nth-last-child()と:nth-of-type()) に出会いました。
構文と操作を理解するのに十分なほど勉強しましたが、いつ、なぜそれを使用する必要があるかについての情報はまだ見ていません。
Google と Stack Overflow からわかることは、主にテーブルの行とリストのスタイルを設定するために使用されるということですが、これは非常に複雑なセレクターの唯一の操作であるには単純すぎるようです。
私は何かを見逃していますか？前もって感謝します！
...他の人がコメントで指摘したように。しかし、表やリスト以外の理由が必要なようです。
基本的な考え方
これらのセレクターを使用すると、選択のために html 自体内の兄弟要素の順序が気になります(これが、テーブルやリストに非常に一般的に使用されるtr理由tdですli。テーブルとリスト)。二次的に、これらのセレクターを使用すると、要素のタイプを含めるか除外するかが懸念されます (したがって、:nth-childとの違い:nth-of-type;よくある誤解の 1 つは、これらの疑似クラスは一部.classNameでカウントできるが、そうではなく、html 要素タイプでカウントするというものです。すなわち<div>、、<li>_<span>など）。一般に、html を変更できない場合、または構造が可変であるが、一貫したセレクターが必要な場合に、いくつかのものを選択できます。
いくつかのシナリオ
これらをターゲットにしたい「理由」は無限であり、推測することはできません。
例 1、 a の最後から 2 番目の要素のスタイルを設定したい場合、divそれがどのタイプであっても (動的 html が生成されているため、それがどの要素であるかさえわからない)、唯一の方法その要素にアクセスするには:nth-last-child(2).
例 2では、3 番目h3が a 内にあるとしdivます。スタイルの変更にはアクセスできますが、html にはアクセスできません (そのため、クラスを配置することはできず、対象となるクラスまたは ID がありません)。h3ただし、周囲の他の要素の数は異なる場合がありますが、これは常に html 内のそのタイプの 3 番目の要素であることがわかっています。h3:nth-of-type(3)そのため、それをターゲットにする能力が可能になります。これは、他の方法では得られなかった能力です。
他のシナリオ (これも無限) を示すことができますが、「基本的な考え方」に記載されている概念に固執する場合は、それらが使用される理由をおそらく理解できるでしょう。