Pseudo Classe CSS :nth-last-child

❮ Précédent Suivant ❯

La pseudo-classe :nth-last-child() sélectionne des élément sur la base de leur indice à partir du dernier élément vers le haut.

La pseudo-classe :nth-last-child() peut être spécifiée par un nombre, un mot-clé ou une formule.

Version

CSS3

Syntaxe

:nth-last-child() {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p:last-child {
      background-color: #1c87c9;
      color:#fff;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :nth-last-child</h2>
    <p>Lorem ipsum est simplement du faux texte...</p>
    <p>Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec le sélecteur :nth-last-child():

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:nth-last-child(odd) {
      background: #1c87c9;
      color:#eee;
      }
      p:nth-last-child(even) {
      background: #666;
      color:#eee;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :nth-last-child</h2>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
  </body>
</html>