Как я могу получить последний элемент (hr) из следующего кода:
<div>
<div>
<span class="hr"></span>
</div>
<div>
<span class="hr"></span>
</div>
<div>
<span class="hr"></span> <!-- I need this -->
</div>
</div>
.hr:last-child не работает для этого.
Конечно, структура DOM может быть более сложной. Мне просто нужно извлечь последний необходимый элемент.
Ваш вопрос не совсем ясен; существует несколько способов получить последний элемент .hr из вашего примера, но вы говорите: "Структура DOM может быть более сложной". Чтобы ответить на ваш вопрос, вам нужно указать, какие возможные структуры DOM вы могли бы иметь; в некоторых это возможно, в некоторых это не будет.
Вот один из способов получить .hr из последнего div:
div div:last-of-type .hr
Здесь другой способ получить .hr из последнего дочернего элемента внешнего div:
div :last-child .hr
Если вам нужно получить последний элемент .hr из документа, независимо от того, что внутри, то вы не можете сделать это в CSS. В CSS вы можете выбрать только первый, последний или n-й элемент на одном уровне иерархии, вы не можете выбрать последний элемент какого-либо типа, независимо от того, в чем он вложен.
div:last-child .hr
Следующий селектор должен работать:
div *:last-child *:last-child