From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_colon_first-child/index.html | 129 +++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 files/fr/web/css/_colon_first-child/index.html (limited to 'files/fr/web/css/_colon_first-child') diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..508a65a4de --- /dev/null +++ b/files/fr/web/css/_colon_first-child/index.html @@ -0,0 +1,129 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.

+ +
/* Cible n'importe quel élément <p> qui est */
+/* le premier fils de son élément parent */
+p:first-child {
+  color: lime;
+  background-color: black;
+}
+ +
+

Note : Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.

+
+ +

Syntaxe

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Premier exemple

+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+ +

HTML

+ +
<div>
+  <p>Ce paragraphe est mis en forme car c'est un élément
+     p ET que c'est le premier fils de l'élément div.</p>
+  <p>En revanche, ce paragraphe n'est pas mis en forme
+     car ce n'est pas le premier !</p>
+</div>
+
+<div>
+  <h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
+      un paragraphe.</h2>
+  <p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
+     le premier fils !</p>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Premier_exemple','100%',300)}}

+ +

Utiliser les listes non ordonnées

+ +

CSS

+ +
li{
+  color:blue;
+}
+
+li:first-child{
+  color:green;
+}
+ +

HTML

+ +
<ul>
+  <li>Élément 1 de la liste</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Les éléments correspondants ne doivent pas avoir nécessairement de parent.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.first-child")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf