CSS `:last-child` セレクターはどのように機能し、代替手段は何ですか?

CSS :last-child セレクターの仕様

背景:

:last-child セレクターは最後の子要素をターゲットにします特定の親要素の。ただし、子要素がそのコンテナ内の最後の要素である必要があります。

説明:

次の CSS セレクターを考えてみましょう:

li.complete:last-child {
  background-color: yellow;
}

このセレクターは、その後に他の要素が存在する場合、「complete」クラスを持つ最後の要素に指定されたスタイルを適用しません。たとえば、提供されている HTML では、

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

:last-child セレクターは、2 番目の「完全な」リスト項目に黄色の背景を適用しません。これは、リスト内の最後の要素ではないためです。

代替案:

関係なく、特定のクラスの最後の要素にスタイルを適用する必要がある場合

li.complete:last-of-type {
  background-color: yellow;
}

このセレクターは、後に他の要素がある場合でも、「完全」クラスに一致する最後の要素をターゲットにします。 .

さらに、「nth-child」セレクターを使用して、特定の型の最後の要素をターゲットにすることができます。

ul :nth-child(4) {
  background-color: yellow;
}

Thisクラスに関係なく、4 番目のリスト項目が選択されます。

jQuery の考慮事項:

jQuery セレクター $("li.complete:last-child") は、親要素の最後の要素を探しているため、機能します。 jQuery を使用して特定のクラスの最後の要素をターゲットにするには、「last」関数を使用できます。

$("li.complete").last();

結論:

:last-child セレクター要素が親要素の最後の子である必要があります。そうでない場合は、:last-of-type または "nth-child" がより適切なオプションを提供する可能性があります。

以上がCSS `:last-child` セレクターはどのように機能し、代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。