CSS のコンテナ内で最初に出現するクラス要素を選択する方法は?

指定されたコンテナ内のクラス要素の最初の出現を選択するための CSS セレクター

クラスに基づいて要素を選択する場合、多くの場合、次のような特定の出現をターゲットにする必要が生じます。特定のコンテナ内の最初のインスタンス。この記事では、このような精度を実現する方法について詳しく説明します。

課題を理解する

ID が「B」の要素内にあるクラス「A」の最初の要素をスタイルする必要があるシナリオを考えてみましょう。 。 「B」が別の要素「B」の子ではないと仮定すると、最初は「>」の組み合わせを使用しようとします。 (子セレクター) と ":first-child" (疑似クラス)。ただし、最初の「A」要素の位置が動的であるか予測できない場合、このアプローチは不十分です。

制限の克服

CSS3 は、「:first-of-type」疑似このクラスは、その名前が示すように、兄弟の中から指定された型の最初の要素を選択します。残念ながら、特定のクラスの最初の出現をターゲットにするための組み込みの「:first-of-class」疑似クラスはありません。

この制限を回避するには、一般的な兄弟コンビネータを使用する回避策を採用できます。 「〜。」これにより、同じ親を共有する他の要素との関係に基づいて要素を選択できるようになります。 「~」を使用すると、コンテナ内の最初の「A」要素に続くすべての要素をターゲットにできます。

ソリューションの実装

このソリューションを実装するには、次の 2 つの CSS ルールを使用します。

1. ルール 1: の孫であるすべての ".A" 要素を対象とします。 「.C」要素 (親コンテナとみなされる)。このルールは、この条件を満たす最初の "A" 要素に目的のスタイルを適用します。
2. ルール 2: ルール 1 で選択した最初の ".A" 要素に続くすべての ".A" 要素を対象とします。このルールは、「~」を使用して、「.C」の孫でもある、ターゲットの「A」要素のすべての兄弟を選択します。ルール 1 によって適用されるスタイルに必要な調整は、ここでオーバーライドできます。

ブラウザの互換性

~ セレクターは CSS3 の一部であり、CSS3 によって認識されることに注意することが重要です。 IE7 以降を含むほとんどの主要なブラウザ。

スタイルの表示アプリケーション

ルールがどのように適用されるかを説明するために、次の HTML 構造を考えてみましょう:

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

ルール 1: 要素 [2] にスタイルを適用します。は、それぞれの「.B」コンテナ内の最初の「A」要素です。

ルール2: 要素 [3] は、以前に選択した要素 ([2]) に続く「A」要素であるため、スタイルを適用します。

以上がCSS のコンテナ内で最初に出現するクラス要素を選択する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。