Может кто-нибудь объяснит поведение :nth-child(n)?

Что-то страшное произошло, не поддающееся объяснению, может кто-нибудь подскажет, что случилось и что произошло?
Для наглядности есть codepen.

Если в html убрать <span></span>, то к .box__item применится стиль .box__item:nth-child(1) { background: red;}
Если же <span></span>, есть, то.box__item:nth-child(1) { background: red;}, не применится ???!!!

Объясните пожалуйста почему так происходит, ведь у span, нет класса .box__item ?!
  • Вопрос задан
  • 112 просмотров
Решения вопроса 2
vicodin
@vicodin
Имею некоторый опыт
так у вас span - и есть первый child внутри родительского блока box, поэтому к нему и применяются стили.
если вы хотите выделять только среди box__item то оберните их ещё в один див, или используйте nth-of-type, как верно подметили zoozag и Stimulate
Ответ написан
Stimulate
@Stimulate
могу
.box__item:nth-of-type(1) {
	background: red;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
zoozag
@zoozag
Opencart
Почитайте про разницу :nth-child и :nth-of-type
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы