CSS에서 ~ 물결표시는 뭔가요?

#menu_chk:checked ~ header>#menu_icon>span:nth-child(1){
  transform: translateY(11px) rotate(45deg);
}
#menu_chk:checked ~ header>#menu_icon>span:nth-child(2){
  transform: translateY(0px) rotate(225deg);
}
#menu_chk:checked ~ header>#menu_icon>span:nth-child(3){
  transform: translateY(-11px) rotate(-45deg);
}

div#side_menu{
  position: absolute;
  top: 60px;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #3d7ea6;
  transition: .35s;
  z-index: 1;
}


#menu_chk:checked ~ div#side_menu{
  left: 0;
}
#menu_chk:checked ~ label#side_bg{
  left:  0;
}