Как закрасить последнюю ссылку?

Question

[xonar]

Здравствуйте.

Есть хлебные крошки, где нужно чтоб последний элемент закрасился в зелёный цвет. Это можно было бы сделать с помощью last-child, но я его уже навесил на / :after.

Можно задать последнему элементу Маршруты модификатор конечно же и закрасить, но представим, что это рабочий сайт и крошек может быть любое количество и вот как именно последний закрашивать.

https://codepen.io/anon/pen/vqxYXL

Answer 1

[Андрей Федоров]

Последняя ссылка у вас не перекрашивается, не потому, что для ::after у вас display: none, а потому что вы скорее всего зеленый цвет даете элементу li. а нужно давать его для li > a.

.breadcrumbs__item:last-child .breadcrumbs__item-link {
  color: green;
}

Пример - https://codepen.io/aliencash/pen/qzrBKd?editors=1100

Comments

[xonar]

Нет, дело в том, что уже last-child есть. Я может не прав, но last-child может быть тольком один. И ваш способ не срабатывает.

[Антон]

xonar, Это кто вам такую глупость про ласт чайлд сказал?

[Андрей Федоров]

xonar, Вы не правы. И все работает - https://codepen.io/aliencash/pen/qzrBKd?editors=1100

[xonar]

Антон, Значит не зря сомневался в этом. Где-то вычитал, теперь буду знать.

[xonar]

Андрей Федоров, Ааа, last-child нужно навесить и туда и туда, а я навешивал только на .breadcrumbs__item-link:last-child

Только всё равно не понимаю, почему если только .breadcrumbs__item-link:last-child навесить, то не закрышивается? Ведь мы указываем, что найди последнюю ссылку по классу breadcrumbs__item-lin и закрась её.

Если объясните, буду очень рад.

[Антон]

xonar, Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.
Иными словами, поиск идет по последнему элементу родителя, а последнем элементов родителя в этой структуре является breadcrumbs__item, а не вложенный в него линк

[Андрей Федоров]

xonar, last-child нужно навесить на родительский элемент для ссылки, а не "и туда и туда". last-child ищет последнее вхождение в границах непосредственного родителя, а не по всему документу, поэтому:

.breadcrumbs__item:last-child .breadcrumbs__item-link
возьмет ссылку только в последнем элементе li

.breadcrumbs__item:last-child .breadcrumbs__item-link:last-child
бессмысленная конструкция, потому что в пределах li у вас только одна ссылка

[xonar]

Антон, Андрей Федоров, спасибо за разъяснения. Теперь понял.