nth-child または nth-of-type セレクターを使用して特定の要素を選択するにはどうすればよいですか?

nth-child または nth-of-type で特定の要素を選択する

指定された要素で 1 番目、2 番目、または 3 番目の要素を選択するにはクラス名では、nth-child または nth-of-type 疑似セレクターを利用できます。これらのセレクターを使用すると、親コンテナー内または同じタイプの兄弟間の位置に基づいて、特定の要素をターゲットにすることができます。

nth-child の使用

nth-子セレクターは、親のすべての子要素の中の位置に基づいて要素を選択します。クラス名を持つ特定の要素をターゲットにするには、要素を親コンテナ内でラップし、次の構文を使用します。

<code class="css">parent_container:nth-child(item number) { ... }</code>

たとえば、要素がクラス名「parent_class」の親要素内に含まれている場合、 " 次のように、クラス名「myclass」を持つ 1 番目、2 番目、および 3 番目の要素を選択できます:

<code class="css">.parent_class:nth-child(1) { ... }
.parent_class:nth-child(2) { ... }
.parent_class:nth-child(3) { ... }</code>

Using nth-of-type

nth-of-type セレクターは、同じ型の兄弟間の位置に基づいて要素を選択します。これは、親コンテナ内に複数のクラスがあり、特定のクラス名を持つ特定の要素をターゲットにしたい場合に便利です。構文は nth-child に似ています:

<code class="css">class_name:nth-of-type(item number) { ... }</code>

これを例に適用すると、次のようにクラス名「myclass」を持つ 1 番目、2 番目、および 3 番目の要素を選択できます。

<code class="css">.myclass:nth-of-type(1) { ... }
.myclass:nth-of-type(2) { ... }
.myclass:nth-of-type(3) { ... }</code>

以上がnth-child または nth-of-type セレクターを使用して特定の要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。