Can someone explain the purpose of using '~' in this code snippet? I came across this example in a tutorial and am curious about its significance. http://css-tricks.com/the-checkbox-hack/
I understand that it alters the styling of an element based on the checkbox's state, but I haven't been able to find any documentation that clarifies the use of '~'. Can anyone shed some light on this?
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
div {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
background: red;
}