Как выделить последний элемент?

Question

[Александр]

Вот здесь простой пример что я хочу
https://jsfiddle.net/8pmtvrcq/10/

Нужно выделить последний span в списке с классом .group. Всегда думал, что span.group:last-child поможет, но оказалось что не так все просто.

Comments

[Павел Антонов]

https://jsfiddle.net/8pmtvrcq/23/

Answer 1

[Одиночка Айс]

:last-child пофиг на классы, он влияет на последний элемент, который может быть и не span`ом.
:last-of-type также пофиг на классы, но влияет именно на тип тега, в данном случае span, после которого еще что-то может быть.
:nth-child(3) именно то, что нужно, но теряется универсальность.
Либо придется юзать js

Comments

[Александр]

Это печально.

[Артём Кан]

Стилизация через js — плохая практика.
И прошу прояснить потерю универсальности nth-child(n).
Ведь это прекрасный способ отметить, к примеру, каждый 3-ий блок, начиная с 5-ого.

[Одиночка Айс]

Артём Кан, согласен что плохая, но как крайний вариант(( По поводу потери универсальности (я говорил только про этот конкретный случай) - ТСу надо выделить элемент с классом, отчего мы просто жестко задаем порядковый номер, т.е. если этот элемент переедет на другое место, то нам придется переписывать селектор.

Answer 2

[Максим]

https://jsfiddle.net/lenskyuser/8pmtvrcq/13/

Comments

[Александр]

мне нужно выделить последний span.group, а не span

Answer 3

[Олег]

<div class="trow">
  <span class="group">1</span>
  <span class="group">2</span>
  <span class="group">3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>
<script>
var test = document.querySelectorAll(".group");
test[test.length-1].style.cssText = "background:blue; color:#fff;";
</script>

Answer 4

[Артём Кан]

/NewAnswer

Ответа нет.
Селектор .trow > .group:last-child означает "выбери в блоке .trow последний блок, и если он будет с классом group, то ..."
Выбрать последний блок .group можно выбрать только с помощью создания для них род. блока или дать ему модификатор. А также :nth-child(n), где n — кол-во всех .group.
На одном форуме надеяться на CSS4, но вряд ли можно будет использовать этот новый супер псевдокласс, который не будет работать в ie...

Также, если стиль не супер важный, то в принципе можно воспользоваться js, но не рекомендуется.