Как в CSS выбрать первый элемент с определенным классом?

Question

[Андрей Стрелков]

Добрый день, подскажите пожалуйста, как выбрать первый элемент с классом homebox-row-1


Пробовал

.homebox-row-1:first-of-type {
  background: red;
}

не помогло, также пробовал nth-of-type(1) также не получилось

Comments

[Ankhena]

nth-of-type привязываются к типу (тегу) элемента, а не к классу.
Либо заменить нужные div на article, section и т.д. либо js

Answer 1

[profesor08]

.homebox-row-1 {
  background: red;
}

.homebox-row-1 ~ .homebox-row-1 {
  background: yellow;
}

Получается задаешь всем цвет, а потом для всех которые идут после первого цвет сбрасывается на другой.

Comments

[Андрей Стрелков]

Спасибо, больше понравилось данное решение.

Answer 2

[Rustam Bainazarov]

Через CSS это сделать невозможно при однородной структуре, только безумным хаком (column-reverse + селектор тильда + обратный порядок элементов). И другие способы, привязанные к последовательности блоков — это так себе.

Ни :nth-child, ни :first-of-type так не работают (читайте хороший пост на тему).

Поэтому простейший JS вам в помощь:



Update: посмотрите комментарии, там решение на строчку кода меньше.

Comments

[Вадим Кот]

Только уж тогда вместо querySelectorAll использовать querySelector - он то сразу выберет первый элемент

const first = document.querySelector('.grid > .grid-item.is-1'); // выбираем первый элемент с нужным классом
first.classList.add('is-selected'); // добавляем к нему класс

[Rustam Bainazarov]

Вадим Кот, точно, спасибо, ещё проще :))

[Андрей Стрелков]

Спасибо!

Answer 3

[Станислав Возиков]

Андрей Стрелков Дружище, вот лови решение на чистом CSS

.homebox > .homebox-row-0 + :not(.homebox-row-0) {
      background: red;
 }

Ребус тут следующий: первый кто идет после классов `.homebox-row-0` и не является эти классом

Comments

[Андрей Стрелков]

Спасибо

[Станислав Возиков]

Андрей Стрелков, если данный способ подошел, можешь смело отметить как решение))

[Vlad Gohn]

это топовый ответ на самом деле, спасибо огромное!

Answer 4

[forspamonly2]

первый матч поймать нельзя, но можно поймать все не первые.

добавил снизу в примере, любезно предоставленном SmthTo :

Comments

[Rustam Bainazarov]

Гы-гы, там ещё вариант, о котором я писал, что можно их в разметке держать в обратном порядке (3, 2, 1), а потом через flex-flow: column/row-reverse визуально приводить в нормальный вид (1, 2, 3). Тогда можно будет выбрать нужный первый элемент (который на самом деле последний в потоке) через li ~ li.

Словом, костыли так и летят, если опираться только на CSS в этом деле :))