CSS :nth-last-of-type 擬似クラス セレクターのさまざまなアプリケーション シナリオを実装する

CSS :nth-last-of-type 擬似クラス セレクターのさまざまなアプリケーション シナリオを実装するには、特定のコード例が必要です。

CSS では、セレクターはHTML 要素を選択し、スタイルを適用する方法。要素セレクター、クラス セレクター、ID セレクターなどの一般的な基本セレクターに加えて、CSS は特定の要素をより正確に選択するためのいくつかの疑似クラス セレクターも提供します。

一般的に使用される疑似クラス セレクターの 1 つは:nth-last-of-type です。その機能は、指定されたタイプの最後の兄弟要素から n 番目の兄弟要素を選択することです。この記事では、:nth-last-of-type 擬似クラス セレクターのさまざまなアプリケーション シナリオを検討し、詳細なコード例を提供します。

1. 最後の要素の選択

まず、単純なアプリケーション シナリオを見てみましょう。つまり、指定された型の最後の兄弟要素を選択します。 HTML リストがあり、その中の最後の段落要素を選択してスタイルを適用したいとします。 :nth-last-of-type(1) セレクターを使用すると、次のことを実現できます。

p:nth-last-of-type(1) {
  color: red;
}

2. 最後から 2 番目の要素を選択します

最後の要素を選択することに加えて、指定した型の最後から 2 番目の兄弟要素を選択することもできます。 5 つの段落要素を含む HTML リストがあり、最後から 2 番目の段落要素を選択してスタイルを適用したいとします。 :nth-last-of-type(2) セレクターを使用すると、次のように実現できます。

p:nth-last-of-type(2) {
  font-weight: bold;
  color: blue;
}

3. 奇数の位置にある要素を選択します

:nth-last-of-type選択演算子は、指定された型の奇数番号の兄弟要素を選択するために使用することもできます。たとえば、6 つの段落要素を含む HTML リストがあり、奇数の位置にある段落要素を選択してスタイルを適用したいとします。 :nth-last-of-type(odd) セレクターを使用すると、次のことを実現できます。

p:nth-last-of-type(odd) {
  background-color: yellow;
}

4. 偶数の位置にある要素を選択する

同様に、次のことも使用できます。最後から n 番目の型セレクターは、偶数位置にある指定された型の兄弟要素を選択します。たとえば、6 つの段落要素を含む HTML リストがあり、偶数にある段落要素を選択してスタイルを適用したいとします。 :nth-last-of-type(even) セレクターを使用すると、次のことを実現できます。

p:nth-last-of-type(even) {
  background-color: pink;
}

5. 要素の特定の範囲を選択します

:nth-last-of -type セレクターを他のセレクターと組み合わせて使用​​して、指定されたタイプの兄弟要素の特定の範囲を選択することもできます。たとえば、10 個の段落要素を含む HTML リストがあり、3 番目と 6 番目の段落の間の段落要素のみを選択し、それらにスタイルを適用したいとします。これは、:nth-last-of-type(n 3):nth-last-of-type(-n 6) セレクターを使用して実現できます。

p:nth-last-of-type(n+3):nth-last-of-type(-n+6) {
  border: 1px solid black;
}

概要:

この中での記事では、CSS :nth-last-of-type 擬似クラス セレクターのさまざまなアプリケーション シナリオを紹介し、対応するコード例を提供しました。 :nth-last-of-type セレクターを使用すると、指定された型の下から n 番目の兄弟要素をより正確に選択し、それにスタイルを適用できます。この記事が、nth-last-of-type セレクターの理解と適用に役立つことを願っています。

以上がCSS :nth-last-of-type 擬似クラス セレクターのさまざまなアプリケーション シナリオを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。