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

Barbara Streisand
リリース: 2024-11-04 11:01:01
オリジナル
417 人が閲覧しました

How do I select specific elements using the nth-child or nth-of-type selectors?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート