CSS селектор для выбора первого элемента данного класса

Question

Я пытаюсь выбрать первый элемент класса "A" в элементе с идентификатором или классом "B". Я пробовал комбинацию селекторов> + и first-child, так как это не первый элемент внутри элемента класса '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" также различаются. Так есть ли способ выбрать первое вхождение 'A' в элементе 'C'? Потому что класс "С" всегда здесь. Я не могу использовать + > и селекторы first-child, так как путь к первому элементу 'A' отличается, но элемент 'C' всегда есть, и это было бы хорошей отправной точкой.

Answer 1

CSS3 обеспечивает :first-of-type псевдокласс для выбора первого элемента своего типа по отношению к своим братьям и сестрам. Однако это не имеет :first-of-class псевдо-класс.

В качестве обходного пути, если вы знаете стили по умолчанию для других .A элементы, вы можете использовать правило переопределения с общим комбинатором братьев и сестер ~ применять стили к ним. Таким образом, вы как бы "отменяете" первое правило.

Плохая новость в том, что ~ является селектором CSS3
Хорошей новостью является то, что IE распознает его, начиная с IE7, как CSS2 >, так что, если вы беспокоитесь о совместимости браузера, единственным "основным браузером", на котором это не работает, является IE6.

Итак, у вас есть эти два правила:

.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Итак, первое правило применяется. Однако до него не было никаких других подобных элементов, которые ~ Селектор требует, поэтому второе правило не применяется.

3. Этот элемент имеет класс AИтак, первое правило применяется. Это также идет после других элементов с тем же классом под тем же родителем, как требуется ~Таким образом, второе правило также применяется. Первое правило отменено.