Как правильно записать проверку if для checked?

Question

[Лариса]

Никак не могу придумать как без скрипта и фреймворков записать селектор на условие

#tabs1:checked не могу придумать селектор #content1 {
display: block; }

Структура кода

<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 стили не доделаны, не знаю как правильно записать условие tabs1 checked в sass

#content1,
#content2{
display: none;
}

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

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

Или такое невозможно в данном виде, когда в разных блоках?

Заранее благодарна за толковые идеи)

Answer 1

[Андрей Гончаров]

через css невозможно в твоем случае. Css может максимум добиться до соседа, не до родителя и тем более не до элемента в другом блоке. Только js.
Вот пример простеньких табов:

// 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

Comments

[Лариса]

спасибо, но я сразу в начале вопроса написала что интересует есть ли возможность без скриптов и фреймворков

[Егор Живагин]

Лариса: нет возможности такой, по-крайней мере до CSS4 ) А почему бы не написать скрипт? Даже без jQuery . Всё таки в подобных задачах использовать JS правильнее, даже если есть возможность сделать на css

[Лариса]

Егор Живагин: меня интересовала только возможность без скрипта

если нельзя, значит нет решения

вопрос "почему нельзя написать скрипт" выходит за рамки данного вопроса)

[Егор Живагин]

Лариса: конечно, это же вопрос из любопытства. Слишком много такого условия в последнее время тут вижу, вот и интересно, то ли олимпиада, то ли нынче верстальщик боятся простеньких скриптов )