This translation is incomplete. Please help translate this article from English.

El combinador general de germans (~) 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 element.

/* Paràgrafs que són germans i posteriors a qualsevol imatge */
img ~ p {
  color: red;
}

Sintaxi

element ~ element { style properties }

Exemple

CSS

p ~ span {
  color: red;
}

HTML

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of 'following-sibling combinator' in that specification.
Working Draft Li dona un nou nom al combinador "subsequent-sibling"
Selectors Level 3
The definition of 'general sibling combinator' in that specification.
Recommendation Definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 7 9 3
Descripció Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Suport bàsic (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Veure

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,