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
.
/* 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. |
Navegadors compatibles
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) |