aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/child_combinator
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:36:08 +0100
commit39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch)
tree66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/css/child_combinator
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2
translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip
unslug fr: move
Diffstat (limited to 'files/fr/web/css/child_combinator')
-rw-r--r--files/fr/web/css/child_combinator/index.html94
1 files changed, 94 insertions, 0 deletions
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
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le combinateur <code>&gt;</code> sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants <strong>directs</strong> des éléments ciblés par le premier sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des enfant d'un */
+/* &lt;ul class="mon-truc"&gt; */
+ul.mon-truc&gt;li {
+ margin: 2em;
+}</pre>
+
+<p>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.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">selecteur1 &gt; selecteur2 { <em>déclarations CSS</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+ background-color: white;
+}
+
+div &gt; span {
+ background-color: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+ &lt;span&gt;Premier span du div.
+ &lt;span&gt;Deuxième span, dans un span dans un div.&lt;/span&gt;
+ &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Troisième span, en dehors de tout div.&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Spécification</th>
+ <th scope="col">État</th>
+ <th scope="col">Commentaires</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
+ <td>{{Spec2('CSS3 Selectors')}}</td>
+ <td>Aucune modification.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
+ <td>{{Spec2('CSS2.1')}}</td>
+ <td>Définition initiale.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Le combinateur de descendant</a></li>
+</ul>