HTML 内の位置に基づいて同じクラス名の特定の要素を選択するにはどうすればよいですか?

位置に基づいて指定されたクラス名の要素を選択する

HTML ドキュメントで、適用される「myclass」というクラスを定義しました。複数の要素に。マークアップ内の位置に関係なく、このクラスで 1 番目、2 番目、または 3 番目の要素を選択したいとします。

JavaScript や jQuery を使用せずにこれを実現するには、CSS 疑似セレクターを使用できます。

1. nth-child(項目番号) の使用

このセレクターは、親要素内の n 番目の子要素をターゲットとします。あなたの場合は、

.parent_class:nth-child(1) { }  // Selects first ".myclass" element
.parent_class:nth-child(2) { }  // Selects second ".myclass" element
.parent_class:nth-child(3) { }  // Selects third ".myclass" element

2 を使用します。 nth-of-type(itemnumber) の使用

このセレクターは、親要素内の指定された要素タイプの n 番目の出現をターゲットとします。クラス「myclass」の「div」要素を選択する必要があるため、以下を使用します。

.myclass:nth-of-type(1) { }  // Selects first ".myclass" element
.myclass:nth-of-type(2) { }  // Selects second ".myclass" element
.myclass:nth-of-type(3) { }  // Selects third ".myclass" element

これらの疑似セレクターを利用すると、位置に基づいて特定の要素を効果的にターゲットにすることができ、適用できるようになります。必要に応じて、それぞれに異なるスタイルを設定します。

以上がHTML 内の位置に基づいて同じクラス名の特定の要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。