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, как CSS1 >, поэтому, если вы беспокоитесь о совместимости браузера, единственный «основной браузер», на котором это не работает, - это 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, поэтому применяется первое правило. Он также идет после других элементов с тем же классом под тем же родителем, как требуется ~, поэтому также применяется второе правило. Первое правило отменено.