Why divison does not display?

Question

Why the division "hello world!" does not display when targeted? How can I fix this, with hello world staying in the division? Why division in division won't display? Please help me.

<!DOCTYPE html>
<html>
<head>
<style>
.tab div {
  display: none;
}

.tab div:target {
  display: block;
}
</style>
</head>
<body>

<div class="tab">

<a href="#link1">Link 1</a>   
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <div>
  <p>Hello World!</p>
  </div>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

</div>

</body>
</html>

.tab div:target div{ display: block; } – user279163 Dec 28 '20 at 14:50 — user279163, Dec 28 '20 at 14:50
needed to add this code :) – user279163 Dec 28 '20 at 14:50 — user279163, Dec 28 '20 at 14:50

score 1 · Answer 1 · answered Dec 28 '20 at 14:48

Because the selector ".tab div" does target all divs that are descendants of the .tab element. And your "Hello World" is in another div and therefor the display:none applies. What you need is ".tab > div", then only the direct child elements get hidden:

<!DOCTYPE html>
<html>
<head>
<style>
.tab > div {
  display: none;
}

.tab div:target {
  display: block;
}
</style>
</head>
<body>

<div class="tab">

<a href="#link1">Link 1</a>   
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <div>
  <p>Hello World!</p>
  </div>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

</div>

</body>
</html>

See https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator for a reference.

Why divison does not display?

1 Answers1