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

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

:first-of-type Pseudo-Class

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 構造を考えてみましょう:

    
...
    
First target
    
Second target
    
Third target

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

ブラウザ互換性:

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