combinação de irmão subsequente do CSS3 (~)

Definição e uso

combinação de irmão subsequente do CSS (~) coincidir com todos os elementoselemento1após o ) elemento2.

elemento1 e elemento2 Deve compartilhar o mesmo pai, mas elemento2 Não precisa estar imediatamente depois elemento1 depois.

Exemplo

Selecione e defina o estilo de todos os <ul> elementos que compartilham o mesmo pai após o elemento <p>:

p ~ ul {
  background-color: dourado;
  border: 1px sólido cinza;
}

Experimente você mesmo

Sintaxe do CSS

elemento1 ~ elemento2 {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a primeira versão do navegador que suporta essa combinação.