Pseudo-classe :last-child en CSS
La pseudo-classe CSS :last-child sélectionne l'élément s'il est le dernier enfant parmi les autres éléments.
Le sélecteur :last-of-type peut être utilisé si l'utilisateur souhaite sélectionner et appliquer le style sur le dernier paragraphe, qu'il soit ou non le dernier enfant.
INFO
À l'origine, l'élément sélectionné devait avoir un parent. Dans le niveau 4 des sélecteurs, cela n'est plus obligatoire.
Version
Syntaxe
Syntaxe CSS :last-child
css
:last-child {
css declarations;
}Exemple du sélecteur :last-child :
Exemple de code CSS :last-child
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Exemple du dernier enfant de la balise <li> :
:last-child autre exemple de code
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:last-child {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Exemple du dernier enfant de la balise <p> :
:last-child deuxième exemple de code
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>Exemple de :last-child pour les listes HTML :
Exemple de la pseudo-classe CSS :last-child
html
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: #8ebf42;
}
ul li:last-child {
border: 1px dotted #8ebf42;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Pratique
Que représente la pseudo-classe CSS :last-child ?