Pseudo Classe CSS :first-child
La pseudo-classe :first-child sélectionne l'élément s'il est le premier enfant parmis les autres éléments.
Le sélecteur :first-of-type peut être utilisé si l'utilisateur veut sélectionner et appliquer le style sur le premier paragraphe, qu'il s'agisse ou non du premier enfant.
Version
CSS2
Syntaxe
:first-child {
css declarations;
}
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p:first-child {
background-color: #1c87c9;
color:#fff;
}
</style>
</head>
<body>
<p>Lorem ipsum est simplement du faux texte...</p>
<h2>Exemple du sélecteur first-child</h2>
<p>Lorem Ipsum est simplement du faux texte...</p>
</body>
</html>
Un autre exemple avec le sélecteur :first-child:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
li:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Exemple du sélecteur :first-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>
Support de Navigateurs
4.0+ | 12.0+ | 2.0+ | 3.1+ | 10.0+ |
Pratiquez vos connaissances
Qu'est-ce que le sélecteur :first-child en CSS permet de faire?
Correcte!
Incorrecte!