Почему nth-child(1) задаем всем свои параметры, а не только первому?

Question

[Ingernirated]

Всем привет!
Не могу поменять фон во 2-ом и 3-ем блоке, подскажите, почему?
https://jsfiddle.net/ou7sn12d/6/

Answer 1

[Никита Егоров]

Правильное обращение выглядит вот так -.about-box:nth-child(1) div

https://jsfiddle.net/Svupol/j6qva0L2/8/

Comments

[Ingernirated]

спасибо!
а почему по кратчайшему пути не сработало и нужно было с самого верха всю цепочку тянуть?

[Никита Егоров]

Ingernirated, потому что кратчайший путь не верен.

Обращение вида .about-box > div:nth-child(1) берет все первые дивы класса about-box.

А обращение .about-box > div:nth-child(2) берет все вторые дивы класса about-box, но таких нет. В этом классе всего один див. Поэтому картинка применяется только из первого обращения, т.к другие не верны.

Answer 2

[tyzberd]

https://jsfiddle.net/zrLjty0h/

Answer 3

[kr241088iav]

перед блоком задаю псевдоэлемент. Хочу чтобы полоска была возле всех блоков , кроме первого. Эта фраза не работает .description-item:before:not(:first-child){
content: "";
position: absolute;
top: 50%;
left: -35%;
width: 28px;
height: 1px;
background: #dae4fe;
}
Если просто вожу .description-item:before полоски появляется возле всех блоков а мне нужно чтобы возле первого не было полоски