CSS3 получить последний элемент

Как я могу получить последний элемент (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 может быть более сложной. Мне просто нужно извлечь последний необходимый элемент.

Ответы

Ответ 1

Ваш вопрос не совсем ясен; существует несколько способов получить последний элемент .hr из вашего примера, но вы говорите: "Структура DOM может быть более сложной". Чтобы ответить на ваш вопрос, вам нужно указать, какие возможные структуры DOM вы могли бы иметь; в некоторых это возможно, в некоторых это не будет.

Вот один из способов получить .hr из последнего div:

div div:last-of-type .hr

Здесь другой способ получить .hr из последнего дочернего элемента внешнего div:

div :last-child .hr

Если вам нужно получить последний элемент .hr из документа, независимо от того, что внутри, то вы не можете сделать это в CSS. В CSS вы можете выбрать только первый, последний или n-й элемент на одном уровне иерархии, вы не можете выбрать последний элемент какого-либо типа, независимо от того, в чем он вложен.

Ответ 2

div:last-child .hr