Селектор CSS, чтобы выбрать первый элемент данного class

Question

Селектор CSS, чтобы выбрать первый элемент данного class

Я пытаюсь выбрать первый элемент класса 'A' в элемент с идентификатором или классом 'B'. Я пробовал комбинацию селекторов> + и first-child, так как это не первый элемент внутри элемента класса 'B'. Это сработало, но ... я Я пытаюсь переопределить некоторые CSS по умолчанию, и я не имею никакого контроля над серверной стороны, и кажется, что элемент класса «А» иногда генерируется в другой позиции. Вот иллюстрация:

<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» всегда есть, и это было бы хорошей отправной точкой.

17

css css-selectors

задан TylerH 19 March 2018 в 19:09

1 ответ

Другие вопросы по тегам:

css css-selectors

Похожие вопросы:

score 38 · Accepted Answer

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>

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