What is the correct way to write an if check for checked?

Question

css

I can’t think of a way to write a selector for the #tabs1:checked condition without a script and frameworks , I can’t think of a selector #content1 {
display: block; }
Code structure

<div class="class1">
    <div class="class2">
        <input id="tabs1" type="radio" checked>
        <label for="tabs1">Белое</label>
    </div>

    <div class="class2">
        <input id="tabs2" type="radio">
        <label for="tabs2">Черное</label>
    </div>
</div>

<div class="class1">
    <section class="class2" id="content1">
        Таблица Белое
    </section>


    <section class="class2" id="content2">
        Таблица Черное
    </section>
</div>

SCSS styles are not completed, I don't know how to correctly write the tabs1 checked condition in sass

#content1,
#content2{
display: none;
}

#content1 {
@if tabs1 checked {
display: block;
}
}

#content2 {
@if tabs2 checked {
display: block;
}
}

Or is this impossible in this form, when in different blocks?
Thanks in advance for great ideas

Answer 1

via css is not possible in your case. Css can reach the maximum to the neighbor, not to the parent, and even more so not to the element in another block. js only.
Here is an example of simple tabs:

// tabs
$(document).ready(function(){
  $('.tab-link').on('click',function () {
    var index = $(this).index();
    select_tab(index);
    return false;
  });
});

function select_tab(index_tab) {
  $('.tab-link').removeClass('active').eq(index_tab).addClass('active');
  $('.tab').removeClass('visible').eq(index_tab).addClass('visible');
}
// tabs