CSS show/hide next elements

Question

I'd like to hide the second id with value my2 via CSS:

<div class="node1">
  <div class="xxx"> blablabla </div>
</div>
<div id="my2">
  <div class="xxx"> blablalbla </div>
</div>
<div class="node2">
  <div class="xxx"> blablabla </div>
</div>
<div id="my2">
  <div class="xxx"> blablalbla </div>
</div>

Is it possible as to hide the second my2 div?

E.g.

.node2 ? #my2 {
     display:none;
}

Thank you!

Answer 1

Yes possible:

Using ~ you can select all siblings with that class(id your case).

.node2 ~ #my2{ 
  display:none; 
}

You can also use + to select the immediate sibling.

.node2 + #my2{ 
   display:none; 
 }

Hope it helps!

Answer 2

In order to target the #my2 element after .node2, you'll need to add a + sign between them.

.node2 + #my2 {
  display: none;
}

But as mentioned before, using multiple id's is invalid markup.

Answer 3

this will hide #my2 which is right after .node2

.node2 + #my2{
  display:none;
}

NOTE: dont use same id for multiple elements

Answer 4

Link each button id to each show id IE: #button1 links to #show1. Use the ~ selector in your CSS make the association. Then toggle the display between none and block.

Demo

HTML

  <a id="button1">Button 1</a>
  <a id="button2">Button 2</a>
  <a id="button3">Button 3</a>

  <div class="text">
    <div class="hidden text" id="show1">This is 1</div>
    <div class="hidden text" id="show2">This is 2</div>
    <div class="hidden text" id="show3">This is 3</div>
  </div>

CSS Use the ~ selector to reference each id

CSS

.hidden {
  display: none;
}

#button1:hover ~ .text #show1 {
    display: block;
}

#button2:hover ~ .text #show2{
    display: block;
}

#button3:hover ~ .text #show3{
    display: block
}

.text {
    position: relative;
    top: 10px;
}

NOTE: You could use <div> instead of <a> for the buttons if you wish.