Почему не срабатывает:last-child?

Question

[Сергей Карвасарный]

Добрый вечер, 1 раз такое, last-child срабатывает вообще странно - jsfiddle.net/3h76uw7e/. Вот скрин с подписью как работает -

Answer 1

[nowm]

Так происходит потому, что :last-child — это последний элемент родительского контейнера. Совсем последний. После него не должно быть никаких элементов. Не получится использовать и :last-of-type, так как last-of-type подразумевает последний элемент по имени, а не по классу (и если после последнего div.blog-item будет хотя бы один div на этом же уровне иерархии, этот div.blog-item перестанет быть last-of-type).

Вообще, я разделители меду элементами делал бы так:

.blog-item + .blog-item {
    /* В ситуации с 5-ю элементами с классом .blog-item, которые строго 
     * следуют друг за другом, этот селектор применится
     * к элементам со второго по пятый. Первый будет проигнорирован.
     */
}

Answer 2

[Олег С]

stackoverflow.com/questions/7687597/using-last-chi...
можно использовать вместо :last-child - :first-child, только вместо border-bottom, задать border-top

Comments

[Олег С]

как-то так
jsfiddle.net/aq4e0zon/1

Answer 3

[Данил Ефремов]

Посмотри, так хочешь?
jsfiddle.net/7sruaj91

Comments

[Сергей Карвасарный]

пробовал так, но суть в том, что блока scroll может и не быть и тогда предпоследниму блоку отменит все.

Answer 4

[Илья Босенок]

Если религия позволяет, сделайте с помощью JQuery

$('.blog-data .blog-item:last')
    .css('border-bottom', 'none');

Answer 5

[GreatRash]

Потому что элемент не является последним чилдом у родителя. Последним чилдом является div.scroll. Когда вы его удаляете правило для div.blog-item вступает в силу.

Вас интересует селектор :last-of-type.

Comments

[nowm]

last-of-type не сработает — я тестировал.

[GreatRash]

Сергей Ронин: codepen.io/GreatRash/pen/RNVqyV :)

[nowm]

GreatRash: Форкнул, Поправил HTML, CSS не менял codepen.io/anon/pen/MYmzGx — не работает. ))

[nowm]

Мне кажется, в этой ситуации немного не хватает динамичности. :) Всё разваливается, если добавляется ещё один div в конец.

[Сергей Карвасарный]

Сергей Ронин: уже поборол через last-of-type, div.scroll переименовал в span и все гуд)

[nowm]

Сергей Карвасарный: ну да, фишка как раз в том, что при last-of-type не должно быть больше элементов такого же типа — только другие. Я так думаю, было бы круто, если бы в CSS было что-нибудь типа «last-of-class» :)

[Сергей Карвасарный]

Сергей Ронин: может сделают)

[GreatRash]

Сергей Ронин: А у вас может быть больше одного элемента "Scroll to view more blog posts"?

[nowm]

GreatRash: у меня, например, после div-блока «Scroll to view more blog posts» мог бы быть ещё один div-блок с каким-нибудь ещё классом, вроде «child-3», в котором, могла бы быть реклама. А следом ещё какой-нибудь блок с ещё каким-нибудь содержимым, который может показываться, а может и вообще не добавляться в контент — в зависимости от каких-то условий или настроек пользователя.