Почему отображаются одинаковые картинки в разных :nth-child?

Question

[Михаил]

Добрый день всем! Есть такой вопрос. В вёрстке есть 6 картинок с одинаковым классом, в css для них описаны стили общие для класса, и отдельно прописаны разные background для каждой отдельно, через :nth-child. Я прописал, например для :nth-child(1) - своя картинка, :nth-child(2) - своя картинка и т.д. Но почему-то отображаются у всех одинаковые background (картинки). Не могу понять, почему.

codepen.io

Answer 1

[Ivan Bogachev]

Не могу понять, почему.

Потому что .slideToBringImg во всех случаях является первым ребенком .slide. Так что вам нужно считать сами слайды, а не эти элементы:

.slide:nth-child(1) .slideToBringImg { ... }
.slide:nth-child(2) .slideToBringImg { ... }
.slide:nth-child(3) .slideToBringImg { ... }

Comments

[Михаил]

спасибо! понятно! :)