Pseudo Classe CSS :last-child

La pseudo-classe CSS :last-child sélectionne l'élément s'il est le dernier enfant parmis les autres éléments.

Le sélecteur :last-of-type peut être utilisé si l'utilisateur veut sélectionner et appliquer le style sur la dernière paragraphe si c'est le dernier enfant ou non.

Version

CSS3

Syntaxe

: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 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 :last-child:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      li:last-child {
      background: #1c87c9;
      } 
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :last-child</h2>
    <ul>
      <li>Paris</li>
      <li>Moscou</li>
      <li>Rome</li>
    </ul>
    <ol>
      <li>Paris</li>
      <li>Moscou</li>
      <li>Rome</li>
    </ol>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple le sélecteur p:last-child sélectionne la dernière paragraphe:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:last-child {
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :last-child</h2>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    <p>Paragraphe 4</p>
  </body>
</html>