-1

I have 3 paragraphs and 3 links, connected between by anchors. Every content (1,2 and 3) are visible - has

display: block. I need to hide every content elements (using display: none) except this clicked. Showing works with using css :target selector in situation when all elements are hidden before clicking, but it must be visible.

Using JS is forbidden! :(

I tried using something like :not(:target) but unfortunately it's not working. How to do this?

https://jsfiddle.net/qzd7f1or/1/

.someClass {
  display: block;
}

.someClass:not(::target) {
  display: none;
}

:target {
  display: block;
}
<p><a href="#element1">Show only content 1</a></p>
<p><a href="#element2">Show only content 2</a></p>
<p><a href="#element3">Show only content 3</a></p>

<p id="element1" class="someClass"><b>Content 1...</b></p>
<p id="element2" class="someClass"><b>Content 2...</b></p>
<p id="element3" class="someClass"><b>Content 3...</b></p>
hencel
  • 52
  • 5
  • Does this answer your question? [HTML tab interface using only CSS](https://stackoverflow.com/questions/4937371/html-tab-interface-using-only-css) – isherwood Sep 12 '22 at 16:39
  • 1
    It's `:target`, not `::target`. https://developer.mozilla.org/en-US/docs/Web/CSS/:target – connexo Sep 12 '22 at 17:46
  • Yes, :target, but using :not(:target) I get blank page with error. – hencel Sep 12 '22 at 17:49

1 Answers1

3

This approach uses only CSS and applies display: none to every someClass element that was not targeted.

:target {
  display: block;
}
.someClass:not(:target) {
  display: none;
}
<p><a href="#element1">Show only content 1</a></p>
<p><a href="#element2">Show only content 2</a></p>
<p><a href="#element3">Show only content 3</a></p>

<p id="element1" class="someClass"><b>Content 1...</b></p>
<p id="element2" class="someClass"><b>Content 2...</b></p>
<p id="element3" class="someClass"><b>Content 3...</b></p>
Sarah
  • 354
  • 1
  • 12
  • Not works correctly, but every content elements must be visible at first. After click for example link 3, content 1 and 2 should be hidden. – hencel Sep 12 '22 at 17:47
  • Hmmm ok. Are you sure you can't use javascript?? Due to the nature of the current CSS, the `display: none` is taking importance. I will update my answer when I get it working correctly. – Sarah Sep 12 '22 at 17:57
  • No, I can't. It's forbidden by client. – hencel Sep 12 '22 at 18:04