\'.class:last-of-type\' を使用して特定のクラスの最後の要素を正しくターゲットにする方法

「.class:last-of-type」の使用法を理解する

CSS では、「.class:last-of- type」セレクターは、特定の親要素内の特定のクラスの最後の要素をターゲットにするために使用されます。ただし、この疑似クラスは要素に対してのみ動作するため、クラスには適用できないことに注意することが重要です。

提供された例では、「.visible:last-of-type」セレクターは次のように設計されています。特定の div 内の「.visible」クラスを持つ最後の段落 (

) 要素を表示します。ただし、3 番目の段落に「.visible」クラスが割り当てられていないため、この問題が発生し、非表示になります。

選択性の問題を修正する

この問題に対処するには、次のようにします。セレクターを変更して、「.visible」クラスを持つ要素とその直接の親内の最後の要素の位置の両方をターゲットにする必要があります:

p.visible:last-child

この修正されたセレクターでは、スタイルが次のように指定されます。 ".visible" クラスを持つ div 内の最後の段落要素に適用されます。

デモの例

解決策を説明するために、次の更新されたコードを検討してください。

<code class="css">p {
    display: none;
}
p.visible:last-child {
    display: block;
}</code>

<code class="html"><div>
  <p class="visible">First paragraph.</p>
  <p class="visible">Second paragraph.</p>
  <p class="visible">Third paragraph.</p>
</div></code>

この改訂されたコードでは、3 つの段落すべてに「.visible」クラスが割り当てられており、最後の段落が表示されます。

結論

要素とクラスの選択の違いを理解することで、「.class:last-of-type」擬似クラスを効果的に利用して、指定されたコンテナ内の特定のクラスに一致する最後の要素をターゲットにすることができます。

以上が\'.class:last-of-type\' を使用して特定のクラスの最後の要素を正しくターゲットにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。