O que significa o seletor CSS “~” (til / squiggle / twiddle)?

858

Procurando pelo ~personagem não é fácil. Eu estava olhando um pouco de CSS e encontrei isso

.check:checked ~ .content {
}

O que isso significa?

css css-selectors Akshat
fonte
3
Verifique a demonstração você vai entender Aqui está uma lista de seletores CSS
Dipak
@ TylerH, isso é algo muito comum usado nas postagens de Stack Overflow, por favor, vá com calma, eu não pretendia fazê-lo pior.
Arsen Khachaturyan 17/04
@ArsenKhachaturyan Talvez você entenda mal; A sintaxe de cotação de bloco é para indicar uma cotação , ou seja, quando um usuário indica que algo (texto, imagem, código, etc.) não é seu próprio trabalho ou palavras, mas é copiado de outro lugar. Como toda formatação, ela tem um propósito semântico; não é algo a ser adicionado, quer ou não. Da mesma forma, não adicione realces aleatórios em negrito às palavras. Deve ser usado com ênfase, com moderação.
TylerH 17/04
@TylerH Entendo que seu nome é "citação" e também o que a "citação" significa. No entanto, em algum momento em que você realmente deseja distinguir perguntas de texto comum, pode tentar algumas técnicas de ênfase, como eu fiz. Para negrito, também é óbvio usar quando você deseja enfatizar coisas, como palavras-chave ou termos conhecidos. Normalmente, eu não gosto quando as pessoas usam negrito por razões desconhecidas, mas às vezes pode ser usado para encontrar facilmente informações relacionadas a tópicos.
Arsen Khachaturyan 17/04
@ArsenKhachaturyan Por favor, não faça isso. >é apenas para aspas , nunca deve ser usado para outros fins. Você também não deve colocar nomes em negrito de tecnologias aleatórias na pergunta. Podemos ver quais tecnologias são relevantes por meio de tags.
meagar

Respostas:

1371

De ~fato, o seletor é o combinador geral de irmãos (renomeado para combinador de irmãos subsequentes nos seletores nível 4 ):

O combinador geral de irmãos é composto pelo caractere "til" (U + 007E, ~) que separa duas seqüências de seletores simples. Os elementos representados pelas duas sequências compartilham o mesmo pai na árvore de documentos e o elemento representado pela primeira sequência precede (não necessariamente imediatamente) o elemento representado pela segunda.

Considere o seguinte exemplo:

.a ~ .b {
  background-color: powderblue;
}
<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>
Expandir snippet

.a ~ .b corresponde ao quarto e quinto item da lista porque:

  • São .belementos
  • São irmãos de .a
  • Aparecer depois .aem ordem de origem HTML.

Da mesma forma, .check:checked ~ .contentcorresponde a todos os .contentelementos que são irmãos .check:checkede aparecem depois dele.

Salman A
fonte
13
"Não necessariamente imediatamente" é a parte principal desta descrição.
PanicBus
1
Existe também um seletor para todos os elementos com o mesmo pai?
Nick N.
1
@NickN. você quer dizer .parent > *?
Salman A
@ SalmanA não exatamente, eu estava esperando que houvesse um seletor que você possa usar, se você não conhece o pai.
Nick N.
7
@ NickN.No não há. O CSS é feito com a proposição de que o analisador de CSS nunca olha para trás no DOM para fazer uma correspondência. Essa é a mesma razão pela qual não há um seletor pai.
yunzen
191

É bom também verificar os outros combinadores da família e voltar ao que é esse específico.

  • ul li
  • ul > li
  • ul + ul
  • ul ~ ul

Exemplo de lista de verificação:

  • ul li- Olhando para dentro - Seleciona todos os lielementos colocados (em qualquer lugar) dentro do ul; Seletor descendente
  • ul > li- Olhando para dentro - Seleciona apenas os li elementos diretos de ul; isto é, ele selecionará apenas filhos diretos lide ul; Seletor de criança ou seletor combinador filho
  • ul + ul- Olhando para fora - Seleciona ulimediatamente após o ul; Não está olhando para dentro, mas olhando para fora para o elemento imediatamente seguinte; Seletor de irmão adjacente
  • ul ~ ul- Olhando para fora - Seleciona tudo o ulque segue ul, não importa onde esteja, mas ambos uldevem ter o mesmo pai; Seletor Geral de Irmãos

O que estamos vendo aqui é o Seletor Geral de Irmãos

Lijo Joseph
fonte
2
Este fazia mais sentido. Terminologia de Layman para o resgate novamente. Agora eu posso ler a documentação técnica.
TheRealChx101
2
Existe um seletor de irmãos para TODOS os irmãos, não apenas para os que se seguem?
Elijah Mock
1
@EliTheHuman, não. Consulte esta postagem do SO para obter mais detalhes - stackoverflow.com/a/11813469/6830901
Lijo Joseph
174

Combinador geral de irmãos

O seletor combinador de irmãos em geral é muito semelhante ao seletor combinador de irmãos adjacente. A diferença é que o elemento selecionado não precisa ter sucesso imediato no primeiro elemento, mas pode aparecer em qualquer lugar depois dele.

Mais informações

Rohit Azad
fonte
31

É General sibling combinatore é explicado muito bem na resposta de @ Salaman.

O que eu perdi é o Adjacent sibling combinatorque é +e está intimamente relacionado ~.

exemplo seria 

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>
  • Corresponde a elementos que são .b
  • São adjacentes a .a
  • Depois .aem HTML

No exemplo acima, marcará o 2º, limas não o 4º.

   .a + .b {
     background-color: #ff0000;
   }
<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>
Expandir snippet

JSFiddle

Matas Vaitkevicius
fonte