From 2793722c2db4297e5d83b24b818b8460bf8477b4 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Thu, 30 Nov 2023 21:44:22 +0100 Subject: [PATCH 1/5] UPDT: Fix #16496 and refresh content --- .../subsequent-sibling_combinator/index.md | 82 +++++++++++++++---- 1 file changed, 66 insertions(+), 16 deletions(-) diff --git a/files/fr/web/css/subsequent-sibling_combinator/index.md b/files/fr/web/css/subsequent-sibling_combinator/index.md index 696dd4b7bb8081..9957609e266300 100644 --- a/files/fr/web/css/subsequent-sibling_combinator/index.md +++ b/files/fr/web/css/subsequent-sibling_combinator/index.md @@ -1,15 +1,17 @@ --- -title: Sélecteurs de voisins généraux +title: Combinateur de voisins généraux 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 généraux** (`~`) permet de séparer deux sélecteurs et de cibler _toutes les instances_ du deuxième élément qui suivent le premier (mais n'étant pas forcément voisin immédiat) et qui partagent le même élément parent. ```css -/* Parmi tous les éléments , cibler tous - éléments

qui les suivent. */ +/* Parmi tous les éléments , cible tous éléments

+ qui les suivent. */ img ~ p { color: red; } @@ -17,13 +19,38 @@ img ~ p { ## Syntaxe -``` +```css-nolint +/* L'espace entre la tilde (~) est optionnel mais est recommendé. */ premier_element ~ second_element { propriétés de style } ``` ## Exemples -### CSS +### Utilisation du combinateur avec des sélecteurs simples + +This example shows the use of the `~` combinator when both the selectors are simple selectors (`p` and `span`). + +```html +

+ Il n'est pas rouge parce qu'il apparaît avant tout paragraphe. +

Voici un paragraphe.

+ Voici un extrait de code. + + 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. + +

Quoi qu'il en soit, gardez le sourire.

+

Rêver en grand

+ + 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. + +
+ + Ce span n'est pas rouge car il ne partage pas de parent avec un paragraphe. + +``` ```css p ~ span { @@ -31,20 +58,43 @@ p ~ span { } ``` -### HTML +### 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 : `.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 -Ici, ce n'est pas rouge. -

Voici un paragraphe.

-Un peu de code. -Et un autre span. -Encore du code -Ici aussi, c'est rouge +

Rêver en grand

+Et encore une fois, il s'agit d'une zone rouge ! +
+

Voici un autre paragraphe.

+ Un span bleu +
+ Un span vert +
+
``` -### Résultat +```css +.monTexte p ~ span { + color: blue; +} + +.monTexte p ~ .monTexte span { + color: green; +} +``` + +{{EmbedLiveSample("Utilisation du combinateur avec des sélecteurs complexes", "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` ; essentiellement, les deux sont imbriqués dans un parent de `.monTexte`. ## Spécifications @@ -56,4 +106,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) From df9fbe1730e9176602e61a0826ab3c1c5e580b26 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Thu, 30 Nov 2023 21:51:42 +0100 Subject: [PATCH 2/5] FIX: markdown lint --- .../fr/web/css/subsequent-sibling_combinator/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/files/fr/web/css/subsequent-sibling_combinator/index.md b/files/fr/web/css/subsequent-sibling_combinator/index.md index 9957609e266300..8fe51595f9f991 100644 --- a/files/fr/web/css/subsequent-sibling_combinator/index.md +++ b/files/fr/web/css/subsequent-sibling_combinator/index.md @@ -20,7 +20,7 @@ img ~ p { ## Syntaxe ```css-nolint -/* L'espace entre la tilde (~) est optionnel mais est recommendé. */ +/* L'espace entre le tilde (~) est optionnel mais est recommendé. */ premier_element ~ second_element { propriétés de style } ``` @@ -36,15 +36,14 @@ This example shows the use of the `~` combinator when both the selectors are sim

Voici un paragraphe.

Voici un extrait de code. - 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. + 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.

Quoi qu'il en soit, gardez le sourire.

Rêver en grand

- 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. + 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. From ebb7c20681ade1d21252cfa8d9d0c8d9cae4cd0d Mon Sep 17 00:00:00 2001 From: tristantheb Date: Thu, 30 Nov 2023 21:54:28 +0100 Subject: [PATCH 3/5] FIX: removed example miss click --- files/fr/web/css/subsequent-sibling_combinator/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/fr/web/css/subsequent-sibling_combinator/index.md b/files/fr/web/css/subsequent-sibling_combinator/index.md index 8fe51595f9f991..a544aba18adccd 100644 --- a/files/fr/web/css/subsequent-sibling_combinator/index.md +++ b/files/fr/web/css/subsequent-sibling_combinator/index.md @@ -57,6 +57,8 @@ p ~ span { } ``` +{{EmbedLiveSample("Utilisation du combinateur avec des sélecteurs simples", "auto", 200)}} + ### 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 : `.monTexte p ~ span` et `.monTexte p ~ .monTexte span`. From 4197ef574b8a8f14312b97c9fa8e312f8121ffc5 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Thu, 30 Nov 2023 22:14:41 +0100 Subject: [PATCH 4/5] UPDT: Rapid update of twin page --- files/fr/web/css/next-sibling_combinator/index.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/files/fr/web/css/next-sibling_combinator/index.md b/files/fr/web/css/next-sibling_combinator/index.md index f2a73d72a9e562..894acbda6be0a3 100644 --- a/files/fr/web/css/next-sibling_combinator/index.md +++ b/files/fr/web/css/next-sibling_combinator/index.md @@ -1,11 +1,13 @@ --- -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 [`element`](/fr/docs/Web/API/Element) parent. ```css /* Ne cible que les paragraphes situé directement après une image */ @@ -16,8 +18,9 @@ img + p { ## 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('Exemples', "auto", 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) From 52cb4bb80a208de7635a1b8a602e8c24b9b7ff40 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 15 Dec 2023 10:26:11 +0100 Subject: [PATCH 5/5] minor review --- .../web/css/next-sibling_combinator/index.md | 6 ++--- .../subsequent-sibling_combinator/index.md | 24 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/files/fr/web/css/next-sibling_combinator/index.md b/files/fr/web/css/next-sibling_combinator/index.md index 894acbda6be0a3..1b6eea05398767 100644 --- a/files/fr/web/css/next-sibling_combinator/index.md +++ b/files/fr/web/css/next-sibling_combinator/index.md @@ -7,10 +7,10 @@ l10n: {{CSSRef("Selectors")}} -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 [`element`](/fr/docs/Web/API/Element) 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; } @@ -45,7 +45,7 @@ li:first-of-type + li { ### Résultat -{{EmbedLiveSample('Exemples', "auto", 100)}} +{{EmbedLiveSample('', "100%", 100)}} ## Spécifications diff --git a/files/fr/web/css/subsequent-sibling_combinator/index.md b/files/fr/web/css/subsequent-sibling_combinator/index.md index a544aba18adccd..a4fd1fe1fda598 100644 --- a/files/fr/web/css/subsequent-sibling_combinator/index.md +++ b/files/fr/web/css/subsequent-sibling_combinator/index.md @@ -1,5 +1,5 @@ --- -title: Combinateur de voisins généraux +title: Combinateur de voisins suivants slug: Web/CSS/Subsequent-sibling_combinator l10n: sourceCommit: bb652aaf3e38f3c7fef970a62f813047dffac879 @@ -7,11 +7,11 @@ l10n: {{CSSRef("Selectors")}} -Le **combinateur de voisins généraux** (`~`) permet de séparer deux sélecteurs et de cibler _toutes les instances_ du deuxième élément qui suivent le premier (mais n'étant pas forcément voisin immédiat) et qui partagent le même élément parent. +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 , cible tous éléments

- qui les suivent. */ +/* Cible tous éléments

qui arrivent après un élément + . */ img ~ p { color: red; } @@ -20,15 +20,15 @@ img ~ p { ## Syntaxe ```css-nolint -/* L'espace entre le tilde (~) est optionnel mais est recommendé. */ -premier_element ~ second_element { propriétés de style } +/* L'espace entre le tilde (~) est optionnel mais est recommandé. */ +element_anterieur ~ element_cible { propriétés de style } ``` ## Exemples ### Utilisation du combinateur avec des sélecteurs simples -This example shows the use of the `~` combinator when both the selectors are simple selectors (`p` and `span`). +Cet exemple illustre l'utilisation du combinateur `~` avec deux sélecteurs simples (`p` et `span`). ```html

@@ -47,7 +47,7 @@ This example shows the use of the `~` combinator when both the selectors are sim
- Ce span n'est pas rouge car il ne partage pas de parent avec un paragraphe. + Ce span n'est pas rouge, car il ne partage pas de parent avec un paragraphe. ``` @@ -57,14 +57,14 @@ p ~ span { } ``` -{{EmbedLiveSample("Utilisation du combinateur avec des sélecteurs simples", "auto", 200)}} +{{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 : `.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. +- Le premier sélecteur complexe, `.monTexte p ~ span`, correspond à tous les `` qui viennent après un paragraphe _si_ le `` 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 `` 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. @@ -90,7 +90,7 @@ L'exemple ci-dessous montre que l'élément cible du sélecteur complexe doit pa } ``` -{{EmbedLiveSample("Utilisation du combinateur avec des sélecteurs complexes", "auto", 200)}} +{{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`.