CSS Selector, div input:checked

Question

How could I repair it, I needed in checkbox with the div (without div in both parts it works), I can use only pure CSS.

Html:

<div><input type="checkbox"></div>
<ul>
    <li>PSD WEBSITES</li>
    <li>UI KITS</li>
    <li>PREMIUM PSD</li>
    <li>ABOUT</li>
    <li>BLOG</li>
</ul>

CSS:

div input:checked ~ ul {
    display: none;
}

Answer 1

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

You have to change your html structure to:

 div input:checked ~ ul { display: none; } 

 <div> <input type="checkbox" /> <ul> <li>PSD WEBSITES</li> <li>UI KITS</li> <li>PREMIUM PSD</li> <li>ABOUT</li> <li>BLOG</li> </ul> </div> 

Reference

General sibling selectors