Hide A Div With CSS Only

Question

Is there a way to hide a div with css only when you click a link. I'm making a popup that needs to be able to close when there is no JS. I've tried various methods but they have not worked when the button is inside the div that needs to hide.

Answer 1

when the button is inside the div that needs to hide.

Short answer: No, you can't achieve this when the button is inside the element. ^{Thanks Joseph Marikle}

However, you can achieve this when the button is outside the div.

#hide {
  display: none;
}
label {
  cursor: pointer;
  text-decoration: underline;
}
#hide:checked ~ #randomDiv {
  display: none;
}

<input type="checkbox" id="hide" />


<div id="randomDiv">
  This is a div
  <label for="hide">Hide div</label>
</div>