Home/ Questions/Q 9151043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:42:18+00:00

What is the meaning of ‘~’ in this example? I saw this example from

  • 0

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 ‘~’?

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s a selector for sibling elements. The one you have there will find all of the ‘div’ siblings of a checked checkbox within the same parent, but only ones that follow the checkbox in the dom. ‘Div’ siblings preceding the checkbox will not be included.

    Awesome selectors reference, including the tilde:
    http://learn.shayhowe.com/advanced-html-css/complex-selectors

    • 0