¿Qué significa el selector de “~” (tilde / squiggle / twiddle) CSS?

Buscar el ~ personaje no es fácil. Estaba revisando algunos CSS y encontré esto

 .check:checked ~ .content { } 

Qué significa eso?

El ~ selector es, de hecho, el combinador de hermanos general (renombrado como combinador de hermanos subsiguientes en selectores de nivel 4 ):

El combinador de hermanos general está hecho del carácter “tilde” (U + 007E, ~) que separa dos secuencias de selectores simples. Los elementos representados por las dos secuencias comparten el mismo elemento primario en el árbol del documento y el elemento representado por la primera secuencia precede (no necesariamente de inmediato) al elemento representado por el segundo.

Considere el siguiente ejemplo:

 .a ~ .b { background-color: powderblue; } 
 
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

Combinador general de hermanos

El selector general del combinador de hermanos es muy similar al selector del combinador de hermanos adyacente. La diferencia es que el elemento seleccionado no necesita tener éxito inmediatamente en el primer elemento, pero puede aparecer en cualquier lugar después de él.

Más información

Es bueno comprobar también los otros combinadores de la familia y volver a lo que es específico.

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

Ejemplo de lista de verificación:

  • ul liLooking inside – Selecciona todos los elementos li colocados (en cualquier lugar) dentro de la ul ; Selector descendente
  • ul > liLooking inside – Selecciona solo los elementos li directos de ul ; es decir, solo seleccionará niños directos li de ul ; Selector de niños o selector de combinador de niños
  • ul + ulMirando afuera – Selecciona el ul inmediatamente después del ul ; No está mirando adentro, sino mirando afuera para el siguiente elemento; Selector de hermanos adyacente
  • ul ~ ulMirando afuera – Selecciona todo el ul que sigue al ul , no importa dónde esté, pero ambos ul deben tener el mismo padre; Selector general de hermanos

El que estamos viendo aquí es General Sibling Selector

Es un General sibling combinator y se explica muy bien en la respuesta de @ Salaman.

Lo que sí extrañé es el Adjacent sibling combinator que es + y está estrechamente relacionado con ~ .

ejemplo sería

 .a + .b { background-color: #ff0000; } 
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • Coincide con elementos que son .b
  • Son adyacentes a .a
  • Después de .a en HTML

En el ejemplo anterior, marcará el 2º li pero no el 4º.

  .a + .b { background-color: #ff0000; } 
 
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

Tenga en cuenta que en un selector de atributos (por ejemplo, [data-components~=wheels] ), la tilde

Representa un elemento con un nombre de atributo de attr cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente el valor.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors