How to hide all other elements but show :target using only CSS (without JS)?

hencel 0
Viewed 40

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>

target show-hide css html
1 Answers

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>

userRHPK0
Related