CODEWITHSUNDEEP
htmlcss
James Bloom
James Bloom

Reputation: 21

Trying to apply styling to the parent div of an element linked to using :target in pure html/css

I have a document with internal links to subheaders throughout.

these subheaders belong to different categories.

I'd like to hide all category content not related to the particular #target.

<html>
<style>
  .tab-folder > .tab-content {
      display: none;
  }
  .tab-folder > .tab-content:target,
  .tab-folder > .tab-content > div:target{
      display: block;
  }
</style>

<div class="tab-folder">
  <a href="#first">Show the first div</a><br>
  <a href="#second">Show the second div</a><br>
  <a href="#third">Show the third div</a><br>
  <a href="#sub-first"> show dummy in first</a><br>
  <a href="#sub-third"> show dummy in third</a><br>

  <div class="tab-content" id="first">First body! <div id="sub-first">dummy</div></div>
  <div class="tab-content" id="second">Second body!</div>
  <div class="tab-content" id="third">Third body!<div id="sub-third">dummy3</div></div>
</div>
</html>

ie when linking to sub-first I'd like all of the first tab-content to return to visibility.

Upvotes: 2

Views: 35

Answers (1)

Temani Afif
Temani Afif

Reputation: 272986

you can play with visibility and font-size instead of display:

.tab-folder>.tab-content {
  visibility: hidden;
  font-size:0;
}

.tab-folder > .tab-content:target,
.tab-folder > .tab-content > div:target {
  visibility: visible;
  font-size:initial;
}
<div class="tab-folder">
  <a href="#first">Show the first div</a><br>
  <a href="#second">Show the second div</a><br>
  <a href="#third">Show the third div</a><br>
  <a href="#sub-first"> show dummy in first</a><br>
  <a href="#sub-third"> show dummy in third</a><br>

  <div class="tab-content" id="first">First body!
    <div id="sub-first">dummy</div>
  </div>
  <div class="tab-content" id="second">Second body!</div>
  <div class="tab-content" id="third">Third body!
    <div id="sub-third">dummy3</div>
  </div>
</div>

Upvotes: 1

Related Questions