Combinateur de voisins suivants
===============================

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
/\* Cible tous éléments <p> qui arrivent après un élément
 <img>. \*/
img ~ p {
  color: red;
}
```

Syntaxe
-------


```css
/\* 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

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;
}
```

### Utilisation du combinateur avec des sélecteurs complexes

Cet exemple contient deux sélecteurs complexes (en-US), 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
<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;
}
```


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`.

* 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
--------------

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Sélecteur de voisin direct