English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-pseudo-classe enfant CSS-class représente l'élément frère premier dans un groupe d'éléments.
Référence complète du sélecteur CSS
Correspond à la première balise <p> de l'élément parent <p>.
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:first-child
{
background-color:orange;
}
</style>
</head>
<body>
<p>Le premier paragraphe du contenu principal.</p>
<h1>Bienvenue sur ma page personnelle</h1>
<p>Ce paragraphe n'est pas le premier enfant de son parent.</p>
<div>
<p>Ce paragraphe est contenu dans un Div.</p>
<p>Ce n'est pas le premier paragraphe.</p>
</div>
<p><b>Attention :</b> :first-Child appliqué à IE8et les versions de navigateurs plus anciennes, la DOCTYPE doit déjà être déclarée.</p>
</body>
</html>Voyons si ça marche ‹/›:first-Le sélecteur child correspond au premier élément fils de l'élément parent.
Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
Attention : :first-Child dans IE8et les versions IE plus anciennes doivent être déclarées!DOCTYPE
Tutoriel CSS Pseudo-classe CSS
Sélectionnez chaque élément <i> dans chaque <p> et définissez son style, où le <p> est le premier élément fils de son élément parent :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
p:first-child i
{
background:yellow;
}
</style>
</head>
<body>
<p>Je suis un <i>strong</i> homme. Je suis un <i>strong</i> homme.</p>
<p>Je suis un <i>strong</i> homme. Je suis un <i>strong</i> homme.</p>
<p><b>Attention :</b> :first-Child appliqué à IE8et les versions de navigateurs plus anciennes, la DOCTYPE doit déjà être déclarée.</p>
</body>
</html>Voyons si ça marche ‹/›Style sélectionné pour le premier élément <li> de la liste :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Café</li>
<li>Thé</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Café</li>
<li>Thé</li>
<li>Coca Cola</li>
</ol>
<p><b>Attention :</b> :first-Child appliqué à IE8et les versions de navigateurs plus anciennes, la DOCTYPE doit déjà être déclarée</p>
</body>
</html>Voyons si ça marche ‹/›Style sélectionné pour le premier élément fils de chaque élément <ul> :
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Base tutorial(oldtoolbag.com)</title>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Café</li>
<li>Thé</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Café</li>
<li>Thé</li>
<li>Coca Cola</li>
</ul>
<p><b>Attention :</b> :first-Child appliqué à IE8et les versions de navigateurs plus anciennes, la DOCTYPE doit déjà être déclarée.</p>
</body>
</html>Voyons si ça marche ‹/›