CSS の親要素内で最初に出現するクラスをターゲットにする方法は?

親内のクラスの最初の出現の選択

CSS では、クラスの最初の要素をターゲットにする必要があるときに問題が発生します。親要素内の特定のクラス、特にそのクラスが兄弟内のさまざまな位置に出現する可能性がある場合。親要素のクラスまたは子の構造が異なる場合、この問題はさらに複雑になります。

:first-of-type 擬似クラス

CSS3 は、:first を提供します。 -of-type 擬似クラス。兄弟内の特定の型の最初の要素を選択できます。ただし、特定のクラスの最初の要素を選択するための、同等の :first-of-class 擬似クラスはありません。

~ と一般的な兄弟セレクターを使用した回避策

回避策の 1 つは、一般的な兄弟コンビネータ (~) を上書きルールとともに使用することです。同じクラスの他の要素に適用されるデフォルト スタイルを把握することで、ターゲット クラスが最初に出現した後に続く要素に対してのみデフォルト スタイルをオーバーライドする、より具体的なルールを作成できます。

例:

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

図:

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

<div class="parentClass">
    <div class="someOtherClass">...</div>
    <div class="targetClass">First target</div>
    <div class="targetClass">Second target</div>
    <div class="targetClass">Third target</div>
</div>

このシナリオでは、最初のルールは次のようになります。 「parentClass」要素内のクラス「targetClass」を持つすべての要素にスタイルを適用します。 2 番目のルールは、最初のルールに続くすべての「targetClass」要素のスタイルをオーバーライドし、最初のルールによって適用されたカスタム スタイルを元に戻します。

ブラウザの互換性:

一般的な兄弟コンビネータ (~) は、IE7 以降で認識されます。したがって、この回避策は、IE6 を除くすべての主要なブラウザーと互換性があります。

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