Не срабатывает селектор first-child, first-of-type?

Question

[kim123]

Есть следующая разметка :

<div class="container">
<div class="card pediatr>
<img src="/img.png>
</div>
<div class="card pediatr>
<img src="/img.png>
</div>
<div class="card nevrolog>
<img src="/img.png>
</div>
<div class="card nevrolog>
<img src="/img.png>
</div>
</div>

Как присвоить селектор для первого класса NEVROLOG? nth-child не подойдет, нужно присвоить именно классу nevrolog первому в спике.
Пробовал nevrolog:first-child и nevrolog:first-of-type, не получалось

Comments

[Александр]

а если попробовать .card.nevrolog:first-of-type ?
скорее всего не сработает, но мало ли

[kim123]

Александр, не, не работает

[Rustam Bainazarov]

К сожалению, он так не работает. Чтобы сработало, .nevrolog должен быть реально первым в разметке, а не просто первым с этим классом.

Можно сделать хаком на first-of-type, но тогда надо выбрать другой тег для всех .nevrolog.

Короче, нормально на CSS это не решить. Нужен JS.

[Дмитрий]

kim123, так не сработает, т.к используется общий контейнер с одинаковым тегом
Пример https://jsfiddle.net/btsvz3mf/1/

[Александр]

Тогда скорее всего чистым css не достать.
На js можно искать конкретный класс внутри блока и к нему уже применять свойства (или добавить дополнительный класс и уже в css делать, что нужно)

[Дмитрий]

также еще как вариант .pediatr + .nevrolog (если данная разметка не будет меняться)

Answer 1

[noboxer]

.nevrolog img:first-child { }

Comments

[kim123]

вау, не ожидал что сработает! спасибо!

[kim123]

а можно ли как-то сделать чтобы на второй класс nevrolog данный стиль не вешался?

[noboxer]

kim123, Вообще вроде как этот псевдокласс должен присваиваться,
когда внутри блока несколько элементов, например:
.block p:first–child
.block p:nth-child ( )
.block p:last-child

[Александр]

Так этот стиль вешается к первому изображению уже ВНУТРИ "nevrolog". И сколько бы nevrolog там ни было, хоть 30, к каждому первому изображению внутри этого блока будет вешаться стиль.
Это не решение))

[noboxer]

Александр, ну так, а сделать обёртку, не?

[Александр]

noboxer, перечитайте вопрос, там про child и т.п.
средствами css пока что нельзя сделать то, что хочет автор вопроса

[noboxer]

Александр, ну так что ему мешает обратиться к
div внутри контейнера и выбрать нужный по его индексу???
.container div:nth-child (3)
Другой вопрос – корректное ли это решение его задачи!
Только при этом, .nevrolog должен быть первым списке, если обращение через first-child!

[Александр]

noboxer, порядок элементов ведь может меняться, скорее всего здесь не статичная выдача результатов, если требуется такая задача

Answer 2

[Арсений Матыцин]

first-of-type + класс + тег дадут необходимый результат.

По умолчанию они работают с типами и дочерними элементами. first-child → первый из всех, first-of-type первый из типа. Тип != класс, но = тег.

ЗЫ: но если у тебя класс генерируются автоматически, то:
1. Ты можешь из бэка передать дополнительный класс для подсветки, скажем, модификатор.
2. Сделать это на JS.