web-dev-qa-db-fra.com

CSS3 récupère le dernier élément

Comment puis-je obtenir le dernier élément (h) du code suivant:

<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 ne fonctionne pas pour cela.

Bien sûr, la structure DOM pourrait être plus compliquée. J'ai juste besoin de récupérer le dernier élément nécessaire.

csscss-selectors
25
Alex Ivasyuv

Votre question n'est pas tout à fait claire; il existe plusieurs façons d'obtenir la dernière .hr élément de votre exemple, mais vous dites que "la structure DOM pourrait être plus compliquée". Afin de répondre à votre question, vous devez mentionner quelles structures DOM possibles vous pourriez avoir; dans certains, cela pourrait être possible, dans certains, ce ne sera pas le cas.

Voici une façon d'obtenir le .hr sur le dernier div:

div div:last-of-type .hr

Voici une autre façon d'obtenir le .hr sur le dernier enfant du div extérieur:

div :last-child .hr

Si vous devez obtenir la dernière .hr élément hors du document, peu importe ce qu'il est à l'intérieur, vous ne pouvez pas le faire en CSS. En CSS, vous ne pouvez sélectionner que le premier, le dernier ou le ne élément à un niveau particulier de la hiérarchie, vous ne pouvez pas sélectionner le dernier élément d'un type quel que soit son contenu.

60
Brian Campbell
div:last-child .hr
5
Delan Azabani

Le sélecteur suivant devrait fonctionner:

div *:last-child *:last-child

Démo: https://jsfiddle.net/78w3bofg/1/

3
Dylan Gordon