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

Question

[Elena Novodvorskaya]

Что-то страшное произошло, не поддающееся объяснению, может кто-нибудь подскажет, что случилось и что произошло?
Для наглядности есть 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 ?!

Comments

[jorshjorsh95]

вангую с nth-child нужно указать дочерний селектор, тогда все ок

[Ankhena]

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

Вообще, это в любом справочнике написано.

Все -чайлды применяются к дочерним элементам своего родителя.
Т.е. при записи .box__item:nth-child(1) браузер сначала найдет родителя элемента .box__item и начнет считать его детей. Соответственно, первый ребенок у вас будет span, если он есть и div, если спана нет.

Для решения задачи используйте :nth-of-type.

Answer 1

[Anton Filippov]

так у вас span - и есть первый child внутри родительского блока box, поэтому к нему и применяются стили.
если вы хотите выделять только среди box__item то оберните их ещё в один див, или используйте nth-of-type, как верно подметили zoozag и Stimulate

Comments

[Elena Novodvorskaya]

Большое спасибо!!!

[Dima Polos]

Да, извините, согласен, тупанул сильно( Если честно, давно приходилось работать с нс-чайлд, поэтому перепутал. Поспешил писать ответ, не повторится, исправлюсь) По поводу разработки, да, занимаюсь, и клиенты довольны, а сам я за чистоту кода, и постоянно продолжаю учиться, так что сразу делать вывод не стоит, как минимум я даже здесь не одному человеку уже помог, и на стаковерфлоу есть репутация.

[Anton Filippov]

Dima Polos, умение признавать свою неправоту дорогого стоит :) Успехов!

[Dima Polos]

flppv, спасибо, и Вам успехов! :)

Answer 2

[Stimulate]

.box__item:nth-of-type(1) {
	background: red;
}

Comments

[Elena Novodvorskaya]

Большое спасибо!!!

Answer 3

[zoozag]

Почитайте про разницу :nth-child и :nth-of-type