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

Question

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

Answer 1

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

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

div div:last-of-type .hr

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

div :last-child .hr

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

Answer 2

div:last-child .hr

Answer 3

Должен работать следующий селектор:

div *:last-child *:last-child

Демо-версия: https://jsfiddle.net/78w3bofg/1/