複雑な HTML 構造内の特定のクラスを持つ最初の要素を選択する方法

指定されたクラスの最初の要素を選択する方法

HTML 要素を操作する場合、スタイルまたは操作のために特定の要素を選択することが重要です。 1 つのシナリオでは、別の要素内で最初に出現するクラスをターゲットにし、目的のクラスの位置が異なる要素内で異なる場合に課題を提示します。

このコンテキストでは、クラス ' を持つ最初の要素を選択することを目的としています。 ID またはクラス 'B' で識別される要素内の A'。問題は、「B」が名前と構造の両方で異なる可能性があり、「A」要素が「B」内での位置に一貫性がない場合に発生します。ただし、一貫した要素が 1 つ残っています。それは、外部要素 'C' の存在です。

解決策: 兄弟セレクターの利用

CSS3 では、:first-of-type 疑似クラスが導入され、兄弟の中でそのタイプの最初の要素。残念ながら、CSS には :first-of-class 疑似クラスがありません。したがって、代替の回避策が必要です。

1 つのアプローチでは、一般的な兄弟コンビネータ (~) を使用し、スタイルをオーバーライドして目的を達成します。この手法は、CSS がトップダウン方式でスタイルを適用するという事実を利用しています。 2 つのルールを定義することで、目的の基準に一致しない '.A' 要素のデフォルトのスタイルをオーバーライドできます:

.C > * > .A {
  /* Styles for all '.A' elements that are grandchildren of '.C' */
}

.C > * > .A ~ .A {
  /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */
}

これらのルールでは、最初のルールは、' の孫であるすべての '.A' をターゲットにします。 C'。これには必要な最初の出現が含まれるため、2 番目のルールを使用して後続の '.A' 要素のこのスタイルを「元に戻す」必要があります。これは、~ コンビネータを使用して、同じ親の下にある別の '.A' 要素に続く '.A' 要素のみを選択することによって実現されます。

スタイルの適用方法

これがどのように行われるかを説明するにはこの手法が機能する場合は、次の HTML 構造を考慮してください:

<div class="C">
  <div class="B">
    <div class="E">Content <!-- [1] --></div>
    <div class="F">Content <!-- [1] --></div>
    <div class="A">Content <!-- [2] --></div>
    <div class="A">Content <!-- [3] --></div>
  </div>
  <!-- ... other elements ... -->
</div>

ここで、「[1]」は基準を満たさない要素を表し、「[2]」と「[3]」は最初の要素を表し、後続の '.A' 要素は、別のスタイルに設定します。

1. 最初のルールは、'.C' の孫であるすべての '.A' 要素をスタイルします。これには要素 '[2]' と '[3]' が含まれます。
2. 2 番目のルールは、同じ親の下にある別の '.A' 要素に続くすべての '.A' 要素を対象とします。これには要素 '[3]' が含まれますが、クラス '.A' との先行兄弟がないため '[2]' は含まれません。

結果として、要素 '[2]' (最初の'.A') はデフォルトのスタイルを保持しますが、要素 '[3]' のスタイルは 2 番目のルールによって上書きされます。したがって、要素 '.C' のコンテキスト内で最初に出現するクラス '.A' をターゲットにしてスタイル設定することに成功しました。

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