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

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

Спасибо за помощь

Ответы

Ответ 1

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

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

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

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

.C > * > .A {
    /* 
     * Style every .A that 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 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>

  • Этот элемент не имеет класса A. Правила не применяются.

  • Этот элемент имеет класс A, поэтому применяется первое правило. Однако перед ним нет других таких элементов, которые требуется селектору ~, поэтому второе правило применяется не.

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