Comment sélectionner l’avant-dernier élément en CSS ?

Sélecteur CSS pour l'avant-dernier élément

Lors de l'utilisation de CSS, il est courant de sélectionner des éléments en fonction de leur position dans un élément parent. Bien que :last-child soit un choix populaire pour sélectionner le dernier élément, existe-t-il un moyen de sélectionner l'élément juste avant le dernier ?

Pour y parvenir, vous pouvez utiliser le sélecteur :nth-last-child en CSS3. Voici comment cela fonctionne :

<code class="css">:nth-last-child(2) {
  /* Styling for the second last child */
}</code>

Dans cet exemple, le sélecteur :nth-last-child(2) correspondra à l'élément situé à deux de la fin de son élément parent. Dans le HTML spécifié, il sélectionnerait l'élément suivant :

<code class="html"><div>SELECT THIS</div></code>

Voici une version mise à jour du HTML avec le sélecteur approprié appliqué :

<code class="html"><div id="container">
  <div>a</div>
  <div>b</div>
  <div class="second-last">SELECT THIS</div>
  <div>c</div>
</div></code>

<code class="css">#container .second-last {
  /* Styling for the second last child of #container */
  background-color: lightblue;
}</code>

Les navigateurs pris en charge pour L'avant-dernier enfant inclut :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!