explain the CSS selections with sign"~" for following example code?

what I have
when I am going through geek ended up with some doubts

<label class="script">
       Yes
       <input type="checkbox">
       <span class="geekmark"></span>
</label>

some CSS selectors I don’t understand 👇

1) .script:hover input~.geekmark {}
2) .script input:active~.geekmark{}
3) .script input:checked~.geekmark {}
4) .script input:checked~.geekmark:after{}
5) .script .geekmark:after{}

please explain them in descriptive way,
like if we have parent:hover > child{} when mouse hovered over parent then the child get styled please explain those above 5 CSS selections in such descriptive manner

>Solution :

Sure, here’s an explanation of each of the 5 CSS selectors:

1. .script:hover input~.geekmark– Selects the element with class
   .geekmark that is a sibling of the input element and only applies
   the styles when the parent element with
   class .script is hovered over.

2. .script input:active~.geekmark – Selects the element with class
   .geekmark that is a sibling of the input element and only applies
   the styles when the input element is actively being clicked.

3. .script input:checked~.geekmark – Selects the element with class
   .geekmark that is a sibling of the input element and only applies
   the styles when the input element is in a
   checked state.

4. .script input:checked~.geekmark:after – Selects the pseudo-element
   :after of the element with class .geekmark that is a sibling of the
   input element and only applies the styles when the input element is in a
   checked state.

5. .script .geekmark:after – Selects the pseudo-element :after of the
   element with class .geekmark that is a child of the element with
   class .script and applies the styles to it.