0

Here you can see radiobuttons (styled as tabs) and some divs after them:

<div class="tabs2">
<input type="radio" name="tabs-btn" id="tabs-btn-1" value="" checked="">
<label for="tabs-btn-1">Pagine del sito</label>
<input type="radio" name="tabs-btn" id="tabs-btn-2" value="">
<label for="tabs-btn-2">Prodotto</label>
<input type="radio" name="tabs-btn" id="tabs-btn-3" value="">
<label for="tabs-btn-3">Caricamento di .po file</label>
 </div>
  
  <div id="tabcontent-1">
  Content New 1...
</div>
 <div id="tabcontent-2">
  Content New 2...
</div>
 <div id="tabcontent-3">
  Content New 3...
</div>

Here is css:

.tabs2 {
font-size: 0;
width: 70%;

/* text-align: center; */
margin: 0 15%;
}


.tabs2>input[type="radio"] {
display: none;
}


.tabs2~div {
/* hide content */
display: none;
border: 1px solid #e0e0e0;
padding: 10px 15px;
font-size: 16px;
}



/* show content (input type="radio") */
#tabs-btn-1:checked~#tabcontent-1,
#tabs-btn-2:checked~#tabcontent-2,
#tabs-btn-3:checked~#tabcontent-3 {
display: inline-block;
font-size: 16px;
}



.tabs2>label {
display: block;
text-align: left;
vertical-align: middle;
user-select: none;
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
padding: 2px 8px;
font-size: 16px;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
position: relative;
top: 1px;
width: 200px;
}

.tabs>label:not(:first-of-type) {
border-left: none;
}

.tabs2>label:not(:first-of-type) {
border-left: none;
}


.tabs2>input[type="radio"]:checked+label {
background-color: #fff;
border-bottom: 1px solid #fff;
}

I want to show divs with id "tabcontent-1", "tabcontent-2", "tabcontent-3" when clicking on labels for "tabs-btn-1", "tabs-btn-2", "tabs-btn-3". For some reason i can not change the html block, but can change css. I think something is wrong with this:

/* show content (input type="radio") */
    #tabs-btn-1:checked~#tabcontent-1,
    #tabs-btn-2:checked~#tabcontent-2,
    #tabs-btn-3:checked~#tabcontent-3 {
    display: inline-block;
    font-size: 16px;
    }

So how can i fix this? p.s. the fiddle - https://jsfiddle.net/grn1qtoa/

creators
  • 179
  • 8
  • That is because the `~` works as a general sibling selector: yet your radio buttons and your target elements are not in the same parent and are therefore not siblings. They are in two separate parents, so the `~` will not work. – Terry Aug 05 '21 at 11:59
  • I you aren't allowed to change the HTML then you may have to resort to Javascript - are you allowed to do that? – A Haworth Aug 05 '21 at 12:04
  • `"The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element."` [link](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) - the tabs do not share the same parent as the checkboxes – Professor Abronsius Aug 05 '21 at 12:04
  • yes, i know that `~` is wrong in my case, but what is the solution? – creators Aug 05 '21 at 12:17
  • it seems that i can't select parent's siblings in pure css - only with js/jquery... – creators Aug 05 '21 at 12:50

0 Answers0