Search code examples
htmlcsspseudo-class

Target pseudo-class not hidden content

I'm trying to do an horizontal menu: when the user clicks (or tap) on one option, the content appears below the menu, at the same page; when the user clicks another option, the new content overlaps the old; the content on each option is variable - can be short or long, with scroll or not.

I tried made it using 'target' on tag p, based on this link: https://www.w3.org/Style/Examples/007/target.en.html

but when I use hr or div or other tags that are not only text, this content appears and it is not recognized inside the p tag, where should it be hidden.

body {
  margin:0;		 
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

div.items p:not(:target) {display: none}
div.items p:target {  display: block; }
<body>
	<p class="menu">  
		<a href="#item1" class="menuLink">Item 1</a>
		<a href="#item2">Item 2</a>
		<a href="#item3">Item 3</a>
	</p>
	
	<div class="items">
		<p id="item1">
			11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.  	
			<br><br>
			Item 1 paragraph 2 after a break line, but appears the content after tag hr or tag div from others items.
		</p>
		
		<p id="item2">
			22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.  	
			<hr>
			Item 2 paragraph 2 after an hr tag, but showed at the start; not hidden inside a p item.
		</p>
		
		<p id="item3">
			33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.  	
			<div>
				Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
			</div>
		</p>
	</div>
	
</body>

What I'm doing wrong?

Solution

  • It looks like you could just add another CSS rule for each type of tag you want to hide. Something like this:

    div.items hr:not(:target), div.items p:not(:target) {display: none}
div.items hr:target, div.items p:target { display: block; }

    Just add as many rules as you need. Better yet, you could wrap all the items in a div and just put the p, hr, etc. inside of that.

    <div class="items">
  <div id="item1">
    <p>Some text</p>
    <hr />
    <p>Something else</p>
  </div>
  <div id="item2">
     ...
  </div>
  ...
</div>

    Then just do this:

    div.items > div:not(:target) {display: none}
div.items > div:target { display: block; }

    Hope that helps.