Sélectionnez l'avant-dernier élément avec css

135

Je connais déjà: le dernier enfant. Mais y a-t-il un moyen de sélectionner le div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

REMARQUE: sans jQuery, uniquement avec CSS

html css css-selectors

— dynamique
source

Il y a sûrement une logique pour expliquer pourquoi l'avant-dernier enfant est important?

— David Tang

oui, je dois sélectionner le dernier et l'avant-dernier pour appliquer certains styles

— dynamique

pourquoi ne pouvez-vous pas simplement mettre une classe sur la 2ème dernière

— division

"Pourquoi ne pouvez-vous pas simplement mettre une classe sur le 2ème dernier div": Peut-être si vous arrivez au style de contenu qui est généré, dans lequel vous n'avez pas un accès (facile) pour ajouter une classe à l'avant-dernier élément?

— Henrik

Réponses:

271

Dans CSS3, vous avez:

:nth-last-child(2)

Voir: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

Prise en charge du navigateur nth-last-child :

Chrome 2

Firefox 3.5

Opéra 9.5, 10

Safari 3.1, 4

Internet Explorer 9

— Frosty Z
source

C'est probablement la voie à suivre à moins que vous ne puissiez attacher une classe au div que vous essayez de sélectionner. Comme Frosty l'a mentionné, CSS3 n'est pas pris en charge par les anciens navigateurs ou IE. Jquery est une bien meilleure option si vous êtes préoccupé par la calculabilité entre navigateurs.

— Thomas

C'était un copier / coller de l'article lié ... Réponse modifiée, merci.

— Frosty Z

solution en css: #container>: nth-last-child (2) {background: red;} Veuillez vérifier ce codepen pour le voir en direct: codepen.io/marc_dahan/pen/JyxObz

— marcdahan

Maintenant que nous n'avons plus besoin de prendre en charge les anciens IE, cette réponse fonctionnera parfaitement. Honnêtement, si les gens utilisent toujours IE 8 et moins, ils ne méritent pas d'avoir de jolies choses.

— Stender le

Remarque: a publié cette réponse car OP a déclaré plus tard dans les commentaires qu'il devait sélectionner les deux derniers éléments , pas seulement l'avant-dernier.

Le :nth-childsélecteur CSS3 est en fait plus performant que vous ne l'auriez imaginé!

Par exemple, cela sélectionnera les 2 derniers éléments de #container:

#container :nth-last-child(-n+2) {}

Mais ce n'est que le début d'une belle amitié.

:nth-child Prise en charge du navigateur

Afficher l'extrait de code

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

Développer l'extrait

— kapa
source

Bien, ma réponse ne sélectionne que le dernier enfant moins 1. Je ne savais pas à ce sujet. + 'd

— rsplak