Changing others element's style with :target, html5

Question

I'm using :target in html and I code something like that:

<div class="1">
    <div>
       <ul>
          <a href="#2">link to part 2</a>
       </ul>
    </div>

    <div class="ex">
        <ul id="2">
           <p>hi</p>
        </ul> 
    </div>

and I've done this in css:

.ex ul {
    display: none;
 }
 .ex ul:target {
    display: block;
 }

I need to make so that when you click on the link (in this case the words 'link to part 2') the #2 ul show, (alredy done this) and the ul whit the link disappears, how can I do?

Answer 1

One way this can be accomplished is with JavaScript. I added the id remove-on-click to your link which you want removed, and then created a JavaScript event listener to alter the style of this item when it is clicked. You can see the code working here.

<div class="1">
  <ul>
    <a href="#2" id="remove-on-click">link to part 2</a>
  </ul>
</div>

<div class="ex">
  <ul id="2">
    <p>hi</p>
  </ul> 
</div>

<script>
  document.getElementById('remove-on-click').addEventListener('click',function(){
    this.style.display = "none";
  })
</script>

I did not edit any of your other code, but keep in mind that ul tag should be used with li descendants. If you do not have a li descendant, use another tag, such as a div. Also, you may want to become more familiar with proper naming of class and id attributes, especially in regards to not beginning them with a digit:

https://www.w3.org/TR/CSS2/syndata.html#characters

What are valid values for the id attribute in HTML?

Answer 2

The key consideration to note is that you must write the markup in reverse order.

This is because CSS selectors can only select:

• an element itself (or a pseudo-element)
• an element's descendant elements
• an element's subsequent siblings

It cannot select an ancestor element or (in this scenario) a previous sibling.

Once you have written the markup in reverse order, you can achieve the effect you want using CSS.

Working Example:

#part2,
#part3 {
  display: none;
}

#part2:target,
#part3:target {
  display: block;
}

#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
  display: none;
}

<div id="part3">
<p>This is Part 3.</p>
</div>

<div  id="part2">
<p>This is Part 2.</p>
<ul>
<li><a href="#part3">Link to Part 3</a></li>
</ul> 
</div>

<div id="part1">
<p>This is Part 1.</p>
<ul>
<li><a href="#part2">Link to Part 2</a></li>
</ul>
</div>