fr: Updating Subsequent-sibling_combinator content to fix #16496 (#…

…17212) * UPDT: Fix #16496 and refresh content * FIX: markdown lint * FIX: removed example miss click * UPDT: Rapid update of twin page * minor review --------- Co-authored-by: SphinxKnight <[email protected]>
mdn · Dec 15, 2023 · 39e14c3 · 39e14c3
1 parent fbceeda
commit 39e14c3
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 24 deletions.
diff --git a/files/fr/web/css/next-sibling_combinator/index.md b/files/fr/web/css/next-sibling_combinator/index.md
@@ -1,23 +1,26 @@
 ---
-title: Combinateur de voisin direct
+title: Combinateur de voisins directs
 slug: Web/CSS/Next-sibling_combinator
+l10n:
+  sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879
 ---
 
 {{CSSRef("Selectors")}}
 
-Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.
+Le **combinateur de voisin direct** (`+`) sépare deux sélecteurs et ne fait correspondre le second élément que s'il suit _immédiatement_ le premier élément, et si les deux sont des enfants du même élément parent.
 
 ```css
-/* Ne cible que les paragraphes situé directement après une image */
+/* Ne cible que les paragraphes situés directement après une image */
 img + p {
   font-style: bold;
 }
 ```
 
 ## Syntaxe
 
-```css
-premier_element + element_cible { styles }
+```css-nolint
+/* L'espace blanc autour du combinateur + est facultatif mais recommandé. */
+premier_element + second_element { propriétés de style }
 ```
 
 ## Exemples
@@ -42,7 +45,7 @@ li:first-of-type + li {
 
 ### Résultat
 
-{{EmbedLiveSample('Exemples', 200, 100)}}
+{{EmbedLiveSample('', "100%", 100)}}
 
 ## Spécifications
 
@@ -54,4 +57,4 @@ li:first-of-type + li {
 
 ## Voir aussi
 
-- [Les combinateurs d'éléments voisins](/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux)
+- [Les combinateur de voisins généraux](/fr/docs/Web/CSS/Subsequent-sibling_combinator)
diff --git a/files/fr/web/css/subsequent-sibling_combinator/index.md b/files/fr/web/css/subsequent-sibling_combinator/index.md
@@ -1,50 +1,101 @@
 ---
-title: Sélecteurs de voisins généraux
+title: Combinateur de voisins suivants
 slug: Web/CSS/Subsequent-sibling_combinator
+l10n:
+  sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879
 ---
 
 {{CSSRef("Selectors")}}
 
-Le combinateur `~` permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.
+Le **combinateur de voisins suivants** (`~`) permet de séparer deux sélecteurs et de cibler _toutes les instances_ du deuxième élément qui suivent le premier (qui ne sont pas nécessairement voisins immédiats) et qui partagent le même élément parent.
 
 ```css
-/* Parmi tous les éléments <img>, cibler tous
-   éléments <p> qui les suivent. */
+/* Cible tous éléments <p> qui arrivent après un élément
+   <img>. */
 img ~ p {
   color: red;
 }
 ```
 
 ## Syntaxe
 
-```
-premier_element ~ second_element { propriétés de style }
+```css-nolint
+/* L'espace entre le tilde (~) est optionnel mais est recommandé. */
+element_anterieur ~ element_cible { propriétés de style }
 ```
 
 ## Exemples
 
-### CSS
+### Utilisation du combinateur avec des sélecteurs simples
+
+Cet exemple illustre l'utilisation du combinateur `~` avec deux sélecteurs simples (`p` et `span`).
+
+```html
+<article>
+  <span>Il n'est pas rouge parce qu'il apparaît avant tout paragraphe.</span>
+  <p>Voici un paragraphe.</p>
+  <code>Voici un extrait de code.</code>
+  <span>
+    Ce span est rouge parce qu'il apparaît après le paragraphe, même s'il y a
+    d'autres nœuds entre les deux.
+  </span>
+  <p>Quoi qu'il en soit, gardez le sourire.</p>
+  <h1>Rêver en grand</h1>
+  <span>
+    Quel que soit le nombre ou le type de nœuds intermédiaires, tous les span
+    issues du même parent après un paragraphe sont rouges.
+  </span>
+</article>
+<span>
+  Ce span n'est pas rouge, car il ne partage pas de parent avec un paragraphe.
+</span>
+```
 
 ```css
 p ~ span {
   color: red;
 }
 ```
 
-### HTML
+{{EmbedLiveSample("", "auto", 300)}}
+
+### Utilisation du combinateur avec des sélecteurs complexes
+
+Cet exemple contient deux [sélecteurs complexes](/fr/docs/Web/CSS/CSS_selectors/Selector_structure#selecteur_complexe), tous deux utilisant le combinateur de voisins généraux&nbsp;: `.monTexte p ~ span` et `.monTexte p ~ .monTexte span`.
+
+- Le premier sélecteur complexe, `.monTexte p ~ span`, correspond à tous les `<span>` qui viennent après un paragraphe _si_ le `<span>` et le paragraphe partagent le même parent **et** ce parent ou un parent _plus haut_ de ce parent a la classe `.monTexte`.
+- Le second sélecteur complexe, `.monTexte p ~ .monTexte span`, correspond à toutes les `<span>` qui sont un descendant de l'élément parent avec la classe `.monTexte` _si_ cet élément est un voisin du paragraphe mentionné précédemment.
+
+L'exemple ci-dessous montre que l'élément cible du sélecteur complexe doit partager le même parent que l'élément initial du sélecteur complexe.
 
 ```html
-<span>Ici, ce n'est pas rouge.</span>
-<p>Voici un paragraphe.</p>
-<code>Un peu de code.</code>
-<span>Et un autre span.</span>
-<code>Encore du code</code>
-<span>Ici aussi, c'est rouge</span>
+<h1>Rêver en grand</h1>
+<span>Et encore une fois, il s'agit d'une zone rouge !</span>
+<div class="monTexte">
+  <p>Voici un autre paragraphe.</p>
+  <span>Un span bleu</span>
+  <div class="monTexte">
+    <span>Un span vert</span>
+  </div>
+</div>
+```
+
+```css
+.monTexte p ~ span {
+  color: blue;
+}
+
+.monTexte p ~ .monTexte span {
+  color: green;
+}
 ```
 
-### Résultat
+{{EmbedLiveSample("", "auto", 200)}}
+
+Dans le HTML ci-dessus, les deux voisins de `.monTexte p` sont `span` et `.monTexte`. Le `span` vert est un descendant de la classe `.monTexte`, qui est un voisin de `p`.
 
-{{EmbedLiveSample('Exemples', 280, 120)}}
+- Lorsque la cible du sélecteur est `span`, l'élément `span` qui est un voisin de `p` est sélectionné. L'élément `p` est un descendant de `.monTexte`, tout comme ses voisins `span`.
+- Dans `.monTexte p ~ .monTexte span`, la cible du sélecteur est `span` qui est un descendant de `.monTexte`. Dans ce cas, `span` est sélectionné si `.monTexte` est un voisin de `p`&nbsp;; essentiellement, les deux sont imbriqués dans un parent de `.monTexte`.
 
 ## Spécifications
 
@@ -56,4 +107,4 @@ p ~ span {
 
 ## Voir aussi
 
-- [Sélecteur de voisin direct](/fr/docs/Web/CSS/Sélecteur_de_voisin_direct)
+- [Sélecteur de voisin direct](/fr/docs/Web/CSS/Next-sibling_combinator)