CODEWITHSUNDEEP
htmlcsscss-selectors
Srisa
Srisa

Reputation: 309

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 the 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

Upvotes: 2

Views: 555

Answers (3)

Jones Joseph
Jones Joseph

Reputation: 4938

Is that what you want. But still this would make it visible once mouse button is UP.

There is only one thing you can do, Make it transparent, But it still will be there, And you cannot achieve this perfectly without JS:

div {
  border: 1px solid red;
  height: 50px
}
div {
  pointer-events: none;
  opacity:1;
  animation: hide 0.1s linear infinite;
  animation-play-state: paused;
}
div a {
  pointer-events: auto;
}
div:active {
  animation-play-state: running;
}
@keyframes hide {
1%{
  opacity:0;
  position:absolute;
  }
  100% {
    opacity: 0;
    position:absolute;
  }
}
<div>
  <span>
    <a>helo</a>
  </span>
  <span>
    <a>hi</a>
  </span>
</div>
Some randow text/element

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 2

web.Doctor
web.Doctor

Reputation: 1

you can use :active,:focus pseudo class.

it's simple solution.you should use both class

span:active div.parent{background:#eaeaea}
span:focus div.parent{background:#eaeaea}

i put the snippet in.

thank you

Upvotes: 0

Related Questions