files/ca/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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

---
title: Combinador general de germans
slug: Web/CSS/General_sibling_combinator
tags:
  - CSS
  - NeedsMobileBrowserCompatibility
  - Reference
  - Selectors
translation_of: Web/CSS/General_sibling_combinator
original_slug: Web/CSS/Selectors_general_de_germans
---
<div><span class="s1">{{CSSRef("Selectors")}}</span></div>

<p>El <strong>combinador general de germans</strong> (<code>~</code>) <span id="result_box" lang="ca"><span>separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare</span></span> {{domxref("element")}}.</p>

<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Paràgrafs que són germans i posteriors a qualsevol imatge</span></span> */
img ~ p {
  color: red;
}</pre>

<h2 id="Syntax" name="Syntax">Sintaxi</h2>

<pre class="syntaxbox">element ~ element { <em>style properties</em> }
</pre>

<h2 id="Example" name="Example">Exemple</h2>

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

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

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

<pre class="brush: html">&lt;span&gt;This is not red.&lt;/span&gt;
&lt;p&gt;Here is a paragraph.&lt;/p&gt;
&lt;code&gt;Here is some code.&lt;/code&gt;
&lt;span&gt;And here is a red span!&lt;/span&gt;
&lt;code&gt;More code...&lt;/code&gt;
&lt;span&gt;And this is a red span!&lt;/span&gt;
</pre>

<h3 id="Resultat">Resultat</h3>

<p>{{ EmbedLiveSample('Example', 280, 120) }}</p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Li dona un nou nom al combinador "subsequent-sibling"</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>7</td>
   <td>9</td>
   <td>3</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>Edge</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Selectors de germans adjacents</a></li>
</ul>