Почему при наличии span не видно блоки?

Question

[Ingernirated]

Всем привет!
Подскажите, почему блоки не видно?
https://jsfiddle.net/1mbs4et7/3/
Но стоит убрать span-ы и всё нормально.

Answer 1

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

https://jsfiddle.net/1mbs4et7/29/
Если добавить span, то дивы по счету 3 или 4, а не 1 и 2

То есть вместо

.about  div:nth-child(1) {
    //...
}
.about  div:nth-child(2) {
    //...
}

Нужно

.about  div:nth-child(3) {
    //...
}
.about  div:nth-child(4) {
    //...
}

Comments

[Ingernirated]

спасибо!
думал для каждого тега свой счёт.

Answer 2

[Elwen]

Если вы хотите использовать разные теги и ориентироваться по их нумерации внутри блока, то стоит использовать псевдокласс :nth-of-type. В отличии от :nth-child он будет учитывать тип тега и расчитывать нумерацию только среди таких же тегов.
:nth-shild же будет впервую очередь ориентироваться на общую нумерацию потомков в блоке, а уже потом смотреть на указанный тег.