CSS を使用してコンテナ内のクラスの最初の要素を選択するにはどうすればよいですか?

指定されたクラスの最初の要素を選択するための CSS セレクター

Web 開発では、Web ページ上の特定の要素を選択することは、スタイルと機能にとって非常に重要です。一般的なタスクの 1 つは、より広範な階層内で特定のクラスを持つ要素の最初の出現を選択することです。

ID またはクラス ' を持つ要素内でクラス 'A' を持つ最初の要素を選択する必要があるシナリオを考えてみましょう。 B'. 「>」の組み合わせおよび「first-child」セレクターは場合によっては機能しますが、「A」要素の位置が「B」要素階層内で異なる場合は失敗します。

CSS3 解決策: :first-of-type

CSS3 は、:first-of-type 擬似クラスを通じてソリューションを提供します。これにより、兄弟に関連して指定された型の最初の要素を選択できるようになります。ただし、CSS3 には :first-of-class 擬似クラスが含まれていません。

一般兄弟コンビネータ (~) を使用した回避策

回避策として、一般兄弟コンビネータ ( ~) を CSS オーバーライドと組み合わせて、目的の結果を実現します。 ~ セレクターは、左側のセレクターで選択された要素の兄弟である任意の要素と一致しますが、直接の子ではありません。

次のルールを考慮してください:

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

このルールは、すべての要素を選択します。クラス「C」の要素の孫であるクラス「A」の要素。 '.C' が、スタイルを設定するすべての 'A' 要素の共通の祖先であると想定します。

次に、オーバーライド ルールを追加します。

.C > * > .A ~ .A {
    /* Style only the .A elements following the first .A child of each element that's a child of .C */
}

このルールは ~ を使用します。セレクターを使用して、同じ親を持つ前の 'A' 要素の後に続く 'A' 要素のみをターゲットにします。これは、最初のルールによって適用されるスタイルを効果的にオーバーライドします。

例:

次の HTML 構造を考えてみましょう:

<div>

上記の CSS ルールは、次のようにスタイルを適用します。

• 要素 [1] にはクラス 'A' がなく、影響を受けます。
• 要素 [2] は、それぞれの親要素内の最初の 'A' 要素であり、最初のルールで定義されたスタイルを受け取ります。
• 要素 [3] は最初の ' ではありません。 A' 要素は、最初のルールをオーバーライドするオーバーライド ルールで定義されたスタイルを受け取ります。

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