General sibling selectors

Resumo

O combinador geral de irmãos (~) separa dois seletores e corresponde ao segundo elemento somente se ele for precedido pelo primeiro, e ambos compartilham um pai comum.

Sintaxe

elemento_anterior ~ elemento_alvo { propriedades de estilo }

Exemplo

css

p ~ span {
  color: red;
}

html

<span>Este não é vermelho.</span>
<p>Aqui temos um parágrafo.</p>
<code>Aqui temos um pouco de código.</code>
<span>E aqui há um span vermelho!</span>
<code>Mais código...</code>
<span>E este também é um span vermelho!</span>

Especificações

Specification
Selectors Level 4
# general-sibling-combinators

BCD tables only load in the browser

Veja mais