HOW to combine two element that has different parent in CSS?

Question

I currently trying to make a TAB without javaScript and only with html and CSS and I found it is possible to do it with radio-button

<body>

<div id="a1" class="a1">
   <div id="a2" class="a2">
     <div id="a3" class="a3">

       <div id="menu" class="menu">
         <div id="menu-1"> <input id=radio-1 checked ><label></label> </div>
         <div id="menu-2"> <input id=radio-2><label></label> </div>
         <div id="menu-3"> <input id=radio-3><label></label> </div>
       </div>

   </div>
 </div>
</div>

<div id="b1" class="b1">
   <div id="b2" class="b2">
     <div id="container" class="container">

        <div id="content1" class="content1"></div>
        <div id="content1" class="content1"></div>
        <div id="content1" class="content1"></div>

     </div>
  </div>
</div>

</body>

If the radio-buton and content are two element in sibling tag/have the same parent, I can use combinator "~" or if it is next o eachothers, I can use "+" to combine those element as a selector, so if any radio-"n" is checked the code inside"{}"is working in content-"n" element (it show&transite to conten-"n") like this:

/* CSS */ 

#radio-1:checked ~ .content-1,
#radio-1:checked ~ .content-2,
#radio-1:checked ~ .content-3 {           
     opacity: 1;
     transition: all 1s;
     blablabla;
     blablabla;
 }

/* CSS */

but the problem is in my html design as above, the radiobutton and the content is already placed way too much in different world...or you can say they have different Parent-tree.

If I won't change the html design, is there another way to connect/Combine those element which have different parent-tree into a selector in CSS?

-Thank Youu...

If you cannot change the HTML...then no. You would need javascript. — Paulie_D, May 03 '16 at 14:55

Rogier Spieker · Accepted Answer · 2016-05-04T18:46:50.483

As you stated correctly the radio button (which actually is a text input in your example as both the type radio and name are missing) are (far) out of scope for CSS selectors alone.

So you're pretty much obligated to use javascript if the HTML should remain the same.

One simple way is to make sure both to have event handlers on the radio buttons and listen for changes (in selection).

working fiddle demonstrating this. (Note that I have taken the liberty to reduce the amount of id attributes in the HTML and added the type and name properties to the <input> elements

It is however possible to solve this without the use of javascript, though it will require your HTML to change (slightly, but still). The trick is to ensure the radio buttons to be somewhere above or at the level where both the tabs and their contents reside.

The trick is to use (or abuse) the option to have labels refer to input element anywhere on the page and to hide the radio buttons.

Simple demonstration with a very reduced set of HTML.

.trickery > input {
  display: none;
}
.tabs > label {
  display: inline-block;
  width: 8em;
  border: 1px solid gold;
}
.container > div {
  display: none;
  min-height: 8em;
  border: 1px solid gold;
}
#tab-1:checked ~ .tabs [for=tab-1],
#tab-2:checked ~ .tabs [for=tab-2],
#tab-3:checked ~ .tabs [for=tab-3] {
  background-color: gold;
}
[value=content-1]:checked ~ .container #content-1,
[value=content-2]:checked ~ .container #content-2,
[value=content-3]:checked ~ .container #content-3 {
  display: block;
}

<div class=trickery>
  <input id=tab-1 type=radio name=tab value=content-1 checked>
  <input id=tab-2 type=radio name=tab value=content-2>
  <input id=tab-3 type=radio name=tab value=content-3>

  <div class=tabs>
    <label for=tab-1>tab one</label>
    <label for=tab-2>tab two</label>
    <label for=tab-3>tab three</label>
  </div>

  <div class=container>
    <div id=content-1>content one</div>
    <div id=content-2>content two</div>
    <div id=content-3>content three</div>
  </div>
</div>

The primary change in your HTML would be to move up the radio buttons high enough to allow 'reaching' both the tabs and the contents from there (given you structure this would be before the tabs as direct child of the body)

Thanks..it work...now i can connect from hidden radio into label and content anywhere deep in different location. as long as the hidden radio is on the top class...or at least having Path to each node label&content...nice idea! — DikaDikz, May 04 '16 at 07:47

HOW to combine two element that has different parent in CSS?

1 Answers1