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

Я удивлён, что никто не упомянул самое простое решение:

.red:not(.red ~ .red) {
    border: 1px solid red;
}

Таким образом, если у вас есть следующая HTML-разметка:

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Это правило CSS добавит рамку только к самому первому элементу с классом .red, так как оно исключает все последующие элементы с классом .red после первого. Это решение является очень чистым и эффективным.

Вы можете использовать first-of-type, nth-of-type(1) или nth-child(1 of .red) для стилизации первого элемента с классом .red.

Вот пример CSS, который применяет разные селекторы:

.red {
  color: green;  
}

/* Для первого элемента .red можно использовать любой из следующих селекторов: */
/* .red:nth-of-type(1) */ 
/* .red:first-of-type */
.home :nth-child(1 of .red) {
  color: red;  
}

В вашем HTML-коде:

<div class="home">
  <span>blah</span>
  <p>not red</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

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

Чтобы ваш селектор сработал, элемент должен иметь класс red и быть первым дочерним элементом своего родителя.

Вот примеры:

<div>
    <span class="red"></span> <!-- СОВПАДЕНИЕ -->
</div>

<div>
    <span>Blah</span>
    <p class="red"></p> <!-- НЕТ СОВПАДЕНИЯ -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></p></div> <!-- СОВПАДЕНИЕ -->
</div>

В первом случае span с классом red действительно является первым дочерним элементом родителя <div>, поэтому произошла проверка. Во втором случае <p class="red"> не является первым дочерним элементом, так как сначала идет span. В третьем примере, хотя p с классом red не является прямым дочерним элементом <div>, он находится в дочернем элементе <div>, который идет после span, что позволяет ему считаться совпадением в этом контексте. Убедитесь, что структура вашего HTML соответствует требованиям селектора.

Поскольку другие ответы охватывают, что в этом варианте не так, я постараюсь рассмотреть другую сторону вопроса — как это исправить. К сожалению, у меня нет решения только на CSS, по крайней мере, не могу ничего придумать. Однако есть несколько других вариантов...

1. Присвойте элементу класс first, когда вы его генерируете, например, так:

   <p class="red first"></p>
   <div class="red"></div>
   

   CSS:

   .first.red {
     border: 5px solid red;
   }
   

   Этот CSS будет применяться только к элементам с оба класса first и red.

2. В качестве альтернативы, сделайте то же самое с помощью JavaScript. Например, вот какой код на jQuery вы могли бы использовать, применяя тот же CSS, что и выше:

   $(".red:first").addClass("first");
   

Ваш вопрос касается применения CSS-стилей к элементам с классом .b в вашем проекте. У вас есть следующий CSS-код:

div > .b ~ .b:not(:first-child) {background: none;}
div > .b {
    background: red;
}

И разметка HTML:

<div>
    <p class="a">The first paragraph.</p>
    <p class="a">The second paragraph.</p>
    <p class="b">The third paragraph.</p>
    <p class="b">The fourth paragraph.</p>
</div>

Давайте разберем, как работают эти стили.

1. Первая часть: div > .b ~ .b:not(:first-child) {background: none;}. Это правило означает, что все элементы с классом .b, которые следуют за первым элементом .b внутри родительского <div>, не будут иметь фона. В вашем случае, это значит, что «четвертый параграф» (<p class="b">The fourth paragraph.</p>) не будет иметь фона, потому что он идет после «третьего параграфа» (<p class="b">The third paragraph.</p>).

2. Вторая часть: div > .b {background: red;}. Это правило задает красный фон для всех элементов с классом .b. Однако, поскольку фоновый цвет будет переопределен для всех элементов, кроме первого, следующим правилом, на «третий параграф» будет применяться красный фон, а на «четвертый» — никакой фон.

В результате, в разметке, у вас будет красный фон только для «третьего параграфа» (класс .b) и никакой фон для «четвертого параграфа».

Если у вас возникли дополнительные вопросы по этому коду или его применению, пожалуйста, дайте знать!