Последний элемент среди соседей можно выбрать селектором псевдо-класса :last-child
.
.item { display: block; }
.item:last-child { font-weight: bold; }
Разметка:
<div>
<div class="item item_rank_1">Object “A”</div>
<div class="item item_rank_1">Object “B”</div>
<div class="item item_rank_0">Object “C”</div>
</div>
Но, если с помощью медиа-запроса скрыть часть элементов списка, то получить последний видимый элемент уже так просто не выйдет.
@media (max-width: 600px) {
.item_rank_0 { display: none; }
}
Казалось бы можно использовать селектор .item_rank_1:last-child
, но это так не работает. Псевдо-класс :last-child
позволяет найти только одного последнего ребёнка своего родителя.
Но мы уже живём в мире HTML5, где можно грабить корованы и придумывать свои собственные теги (оригинал ). По этому вместо того, чтобы отличаться классами, элементы будут отличаются названиями тегов.
<div>
<item-rank-1 class="item">Object “A”</item-rank-1>
<item-rank-1 class="item">Object “B”</item-rank-1>
<item-rank-0 class="item">Object “C”</item-rank-0>
</div>
Да, так тоже можно, если очень хочется.
Теперь в медиа-запросе можно использовать селектор :last-of-type
для того, чтобы получить последний элемент группы, которая не была скрыта.
@media (max-width: 600px) {
item-rank-0.item { display: none; }
item-rank-1:last-of-type { font-weight: bold; }
}
Таким способом можно создавать любые теги и они будут прекрасно поддаваться оформлению через CSS. Для IE < 9 нужно будет их предварительно создать с помощью JavaScript так как делаем это для новых HTML5 элементов.
Комбинируя названия тегов с правилами их видимости, вполне можно подобрать такие селекторы, которые будут выбирать последний видимый элемент.
PS: Не забудьте, что вес тега меньше, чем вес класса при определении специфичности селектора. Так же в названии тега обязательно должен быть символ -
, чтобы парсер мог отличить обычные элементы от ваших собственных.