:nth-last-of-type(3) 擬似クラス セレクターを使用して、同じ型の最後から 3 番目の要素のスタイルを選択します。

:nth-last-of-type(3) 擬似クラス セレクターを使用して、同じ型の要素の中から最後から 3 番目のスタイルを選択します。特定のコード例が必要です。

CSS では、Web ページ内の要素のスタイルを設定する必要があることがよくあります。場合によっては、同じタイプの要素の中から最後から 3 番目の要素を選択し、それに特定のスタイルを適用する必要があります。現時点では、:nth-last-of-type(3) 擬似クラス セレクターを使用してこのタスクを完了できます。

まず、:nth-last-of-type(3) 疑似クラス セレクターの構文を見てみましょう。

:nth-last-of-type(n )

上記のコードでは、n は整数を表し、下からどの要素を選択するかを示します。この要件では、最後から 3 番目の要素を選択する必要があるため、n を 3 に設定します。

次に、具体的な例を見てみましょう:

HTML コード:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>

CSS コード:

li:nth-last-of-type(3) {
    color: red;
    font-weight: bold;
}

上記の例では、順序付けされていません。 6 つのリスト項目を含むリスト。最後から 3 番目のリスト項目を選択し、それに赤いフォントと太字のスタイルを適用したいとします。この目的を達成するには、:nth-last-of-type(3) セレクターを使用できます。

上記のコードを実行すると、リスト項目 4 が最後から 3 番目の要素として選択され、赤いフォントと太字のスタイルが適用されます。他のリスト項目は影響を受けません。

注意事項として、:nth-last-of-type(3) セレクターを使用する場合は、セレクターの階層関係に注意する必要があります。ターゲット要素が直接の子孫要素ではなく、他の要素にネストされている場合は、特定の状況に応じてセレクターの記述方法を調整する必要があります。セレクターの階層規則については、CSS セレクターの関連仕様を参照してください。

要約すると、:nth-last-of-type(3) 擬似クラス セレクターを使用すると、同じ型要素の中から最後から 3 番目の要素を簡単に選択し、それに指定されたスタイルを適用できます。上記の例を通じて、このセレクターをすぐに開始して使用方法を理解し、実際の開発でより適切に適用することができます。

以上が:nth-last-of-type(3) 擬似クラス セレクターを使用して、同じ型の最後から 3 番目の要素のスタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。