HTML で同じクラス名の特定の要素を選択する方法-CSSチュートリアル-php.cn

HTML で同じクラス名の特定の要素を選択する方法

Linda Hamilton

リリース： 2024-11-04 08:28:01

オリジナル

930 人が閲覧しました

How to Select Specific Elements with the Same Class Name in HTML?

指定されたクラス名を持つ特定の要素の選択

HTML 要素を操作する場合、多くの場合、リスト内の特定の要素を選択する必要があります。クラス名を共有する要素。これは、クラスの特定のインスタンスでスタイルを適用したり、アクションを実行したりする場合に特に便利です。

nth-child の使用

クラスリスト内の特定の要素を選択する 1 つの方法nth-child() 擬似クラスセレクターを使用することです。このセレクターを使用すると、親要素内の要素の n 番目の出現を選択できます。

例:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text2</div>
    <!-- some other code+containers... -->

    <div class="myclass">my text3</div>
    <!-- some other code+containers... -->
</div>

.parent_class:nth-child(1) { /* styles for the first element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(2) { /* styles for the second element with the "myclass" class within the "parent_class" element */ }
.parent_class:nth-child(3) { /* styles for the third element with the "myclass" class within the "parent_class" element */ }</code>

ログイン後にコピー

n 番目の要素の使用type

または、nth-of-type() 擬似クラスセレクターを使用することもできます。このセレクターを使用すると、親要素内の特定のタイプの要素の n 番目の出現を選択できます。

例:

<code class="css">.myclass:nth-of-type(1) { /* styles for the first element with the "myclass" class */ }
.myclass:nth-of-type(2) { /* styles for the second element with the "myclass" class */ }
.myclass:nth-of-type(3) { /* styles for the third element with the "myclass" class */ }</code>

ログイン後にコピー

を利用することにより、 >nth-child() または nth-of-type() を使用すると、マークアップ内の位置に関係なく、指定されたクラス名の特定の要素を効果的に選択し、スタイルを適用したりアクションを実行したりできます。

以上がHTML で同じクラス名の特定の要素を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。