CSS3 style an element depending on the state of an input checkbox

DIOLITODipjip

New Member
What is the meaning of '~' in this example? I saw this example from this tutorial. http://css-tricks.com/the-checkbox-hack/I know it can be used to style an element completely differently depending on the state of that checkbox. However, I can't find any CSS documentation that explains '~'?\[code\]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;}\[/code\]
 
Back
Top