aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/child_combinator
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/child_combinator
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/child_combinator')
-rw-r--r--files/fr/web/css/child_combinator/index.md116
1 files changed, 48 insertions, 68 deletions
diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md
index e0d64a3f3f..b53d3eda68 100644
--- a/files/fr/web/css/child_combinator/index.md
+++ b/files/fr/web/css/child_combinator/index.md
@@ -9,85 +9,65 @@ tags:
translation_of: Web/CSS/Child_combinator
original_slug: Web/CSS/Sélecteurs_enfant
---
-<div>{{CSSRef("Selectors")}}</div>
+{{CSSRef("Selectors")}}
-<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>
+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.
-<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 {
+```css
+/* Les éléments <li> qui sont des enfant d'un */
+/* <ul class="mon-truc"> */
+ul.mon-truc>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>
+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.
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="syntaxbox">selecteur1 &gt; selecteur2 { <em>déclarations CSS</em> }
-</pre>
+ selecteur1 > selecteur2 { déclarations CSS }
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="CSS">CSS</h3>
+### CSS
-<pre class="brush: css">span {
+```css
+span {
background-color: white;
}
-div &gt; span {
+div > 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>
-
-<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>
+```
+
+### HTML
+
+```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 | État | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{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
+
+- [Le combinateur de descendant](/fr/docs/Web/CSS/Sélecteurs_descendant)