From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/web/css/child_combinator/index.html | 94 ++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/fr/web/css/child_combinator/index.html (limited to 'files/fr/web/css/child_combinator') diff --git a/files/fr/web/css/child_combinator/index.html b/files/fr/web/css/child_combinator/index.html new file mode 100644 index 0000000000..bc24234ef2 --- /dev/null +++ b/files/fr/web/css/child_combinator/index.html @@ -0,0 +1,94 @@ +--- +title: Sélecteurs enfant +slug: Web/CSS/Sélecteurs_enfant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

+ +
/* Les éléments <li> qui sont des enfant d'un */
+/* <ul class="mon-truc"> */
+ul.mon-truc>li {
+  margin: 2em;
+}
+ +

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

+ +

Syntaxe

+ +
selecteur1 > selecteur2 { déclarations CSS }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Premier span du div.
+    <span>Deuxième span, dans un span dans un div.</span>
+  </span>
+</div>
+<span>Troisième span, en dehors de tout div.</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

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