web-dev-qa-db-fra.com

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

Je sais déjà de: dernier enfant. Mais existe-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>

NOTE: sans jQuery, seulement avec CSS

htmlcsscss3css-selectors
112
dynamic

En CSS3 vous avez:

:nth-last-child(2)

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

nth-last-child Prise en charge du navigateur:

  • Chrome 2
  • Firefox 3.5
  • Opera 9.5, 10
  • Safari 3.1, 4
  • Internet Explorer 9
224
Frosty Z

Remarque: a posté cette réponse car OP a ensuite indiqué dans des commentaires qu'il devait sélectionner les deux derniers éléments , pas seulement l’avant-dernier.

Le :nth-child Le sélecteur CSS3 est en fait plus performant que vous ne l’aviez jamais 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é.

#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>
48
kapa