Srisa Srisa - 19 days ago 5
CSS Question

How to hide a parent element on click of a child element

How can I make parent div element hidden ,on click of anchor tag within div element.

I know how can we do this in javascript/jQuery. I am looking for pure css solution



div {
border: 1px solid red;
}

<div>
<span>
<a>helo</a>
</span>
<span>
<a>hi</a>
</span>
</div>





Thanks

Answer

What you look for is not exactly possible in CSS, and your best bet is some hacks - one of them is using a checkbox and label.

See demo below:

div {
  border: 1px solid red;
}
#checkbox,
#checkbox:checked + div {
  display: none;
}
a {
  border: 1px solid;
  margin:5px;
}
<input type="checkbox" id="checkbox" />
<div>
  <span>
    <a><label for="checkbox">hello</label></a>
  </span>
  <span>
    <a><label for="checkbox">hi</label></a>
  </span>
</div>