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.
-
+
Voici un autre paragraphe.
+
Un span bleu
+
+ Un span vert
+
+