CSS3 obter o último elemento

Question

CSS3 obter o último elemento

Como posso obter o último elemento (hr) do seguinte código:

<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 não funciona para isto.

É claro que a estrutura do DOM pode ser mais complicada. Só preciso de ir buscar o último elemento necessário.

18

css css-selectors css3

Author: Yi Jiang, 2010-09-18

Source

3 answers

div:last-child .hr

4

Author: Delan Azabani, 2010-09-18 08:45:11

O seguinte selector deve funcionar:

div *:last-child *:last-child

Demo: https://jsfiddle.net/78w3bofg/1/

2

Author: Dylan Gordon, 2015-05-21 22:29:38

score 49 · Accepted Answer

Sua pergunta não é bem clara; existem várias maneiras de obter o último elemento {[[2]} de seu exemplo, mas você diz " a estrutura do DOM pode ser mais complicada."A fim de responder à sua pergunta, você precisa mencionar que estruturas possíveis DOM você poderia ter; em alguns pode ser possível, em alguns não será.

Aqui está uma maneira de tirar o último div:

div div:last-of-type .hr

Aqui está outra maneira de tirar o último filho do exterior. div:

div :last-child .hr

Se você precisa tirar o último elemento {[[2]} do documento, independentemente do que ele está dentro, então você não pode fazer isso em CSS. No CSS, você só pode selecionar o primeiro, último ou Nelemento em um nível particular da hierarquia, você não pode selecionar o último elemento de algum tipo, independentemente do que ele está inserido.