files/fr/web/css/general_sibling_combinator/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

---
title: Sélecteurs de voisins généraux
slug: Web/CSS/General_sibling_combinator
tags:
  - CSS
  - Débutant
  - Reference
  - Sélecteur
translation_of: Web/CSS/General_sibling_combinator
original_slug: Web/CSS/Sélecteurs_de_voisins_généraux
---
<div>{{CSSRef("Selectors")}}</div>

<p>Le combinateur <code>~</code> 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.</p>

<pre class="brush: css no-line-numbers notranslate">/* Parmi tous les éléments &lt;img&gt;, cibler tous
   éléments &lt;p&gt; qui les suivent. */
img ~ p {
  color: red;
}</pre>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox notranslate">premier_element ~ second_element { <em>propriétés de style</em> }
</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">p ~ span {
  color: red;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;span&gt;Ici, ce n'est pas rouge.&lt;/span&gt;
&lt;p&gt;Voici un paragraphe.&lt;/p&gt;
&lt;code&gt;Un peu de code.&lt;/code&gt;
&lt;span&gt;Et un autre span.&lt;/span&gt;
&lt;code&gt;Encore du code&lt;/code&gt;
&lt;span&gt;Ici aussi, c'est rouge&lt;/span&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', 280, 120)}}</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', '#general-sibling-combinators', 'following-sibling combinator')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Ce combinateur est renommé en « <em>subsequent-sibling combinator</em> ».</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.selectors.general_sibling")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Sélecteur de voisin direct</a></li>
</ul>