Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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

p ~ span {
  color: red;
}
<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 Status Comment
Selectors Level 4
The definition of 'following-sibling combinator' in that specification.
Rascunho atual Renomeia o combinador como "irmão subsequente".
Selectors Level 3
The definition of 'general sibling combinator' in that specification.
Recomendação Definição inicial.

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 7 9 3
Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

 

Veja mais

Etiquetas do documento e colaboradores

 Colaboradores desta página: dineiar, interaminense
 Última atualização por: dineiar,