web-dev-qa-db-ja.com

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

IDまたはクラス「B」の要素でクラス「A」の最初の要素を選択しようとしています。クラス要素「B」内の最初の要素ではないため、> +と最初の子のセレクターの組み合わせを試しました。それは機能しましたが...私はいくつかのデフォルトのcssをオーバーライドしようとしていますが、サーバー側を制御できず、クラス「A」要素が別の位置で生成されることがあるようです。これがイラストです：

<class-C>
  <class-B> might have a different name
      <some-other-classes> structure and element count might differ
      <class-A></class-A> our target
      <class-A></class-A> this shouldn't be affected
      <class-A></class-A> this shouldn't be affected
  </class-B>
</class-C>

クラス「B」の名前が異なり、「A」の前の要素も異なる場合があります。では、要素「C」で最初に出現する「A」を選択する方法はありますか？クラス「C」は常にそこにあるからです。最初の「A」要素へのパスが異なるため、+>および最初の子セレクターを使用できませんが、要素「C」は常に存在し、それは素晴らしい出発点になります。

csscss-selectors
17
Marius S.

CSS3は、兄弟に関連してそのタイプの最初の要素を選択するための:first-of-type疑似クラスを提供します。ただし、:first-of-class疑似クラスはありません。

回避策として、他の.A要素のデフォルトのスタイルがわかっている場合は、一般的な兄弟コンビネータ~でオーバーライドルールを使用して、それらにスタイルを適用できます。このようにして、最初のルールを「元に戻す」ようにします。

悪いニュースは、~がCSS3セレクターであるということです。
良いニュースは、IEは、CSS2の>のように、IE7以降で認識されるため、ブラウザーの互換性が心配な場合は、唯一の「主要なブラウザー」です。これはIE6で失敗します。

したがって、次の2つのルールがあります。

.C > * > .A {
    /* 
     * Style every .A that's a grandchild of .C.
     * This is the element you're looking for.
     */
}

.C > * > .A ~ .A {
    /* 
     * Style only the .A elements following the first .A child
     * of each element that's a child of .C.
     * You need to manually revert/undo the styles in the above rule here.
     */
}

スタイルが要素にどのように適用されるかを以下に示します。

<div class="C">
    <!--
    As in the question, this element may have a class other than B.
    Hence the intermediate '*' selector above (I don't know what tag it is).
    -->
    <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. この要素にはクラスAがありません。ルールは適用されません。

  2. この要素のクラスはAであるため、最初のルールが適用されます。ただし、その前に~セレクターが必要とする他のそのような要素はないため、2番目のルールはnotが適用されます。

  3. この要素のクラスはAであるため、最初のルールが適用されます。また、~で要求されるように、同じ親の下で同じクラスを持つ他の要素の後に来るため、2番目のルールも適用されます。最初のルールは上書きされます。

38
BoltClock