Combinador general de germans

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 (en-US).

/* 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! (en-US)

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