Как обратиться по классу от input[radio]?

Question

[Arman4ik]

Нужно чтобы когда кликал по лэйблу там отображал контент в другом диве
Возможно ли обратиться по :checked к блоку с контентом?

Вот код:

<div class="food-wrapper">
                <div class="tabs-wrapper">
                    <input class="input" type="radio" name="tabs" id="tab-1" />
                    <input class="input" type="radio" name="tabs" id="tab-2" />

                    <label class="tab tab-1" for="tab-1">Tab-1</label>
                    <label class="tab tab-2" for="tab-2">Tab-2</label>
                </div>
            <div class="food-box">
                <div class="content content-1">content 1</div>
                <div class="content content-2">content 2</div>
            </div>
            </div>

/* _____________________ */

.food {
    margin-top: 80px;
}

.food-wrapper {
    height: 1200px;
    background: #aaaaaa;
    margin-top: 20px;
}

/* _____________________________________________________________ */
.food-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.input {
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
}

.tabs-wrapper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.content {
    width: 100%;
    display: none;
    padding: 20px;
    background: #eee;
}

.tab {
    text-align: center;
    padding: 20px;
    flex-basis: 50%;
}

#tab-1:checked .tabs-wrapper .food-wrapper .food-box ~ .content-1 {display: block;}
#tab-2:checked .tabs-wrapper .food-wrapper .food-box ~ .content-2 {display: block;}

Answer 1

[Softlink]

Нет. Инпут и таб должны иметь одного родителя, тогда сработает селектор ~.

Answer 2

[Надим]

Если вы хотите использовать для показа и скрытия контента CSS-селекторы соседей, то ваши радиокнопки и блоки с контентом должны находится на одном уровне вложенности! Примерно так:

<input class="input" type="radio" name="tabs" id="tab-1" />
<input class="input" type="radio" name="tabs" id="tab-2" />
<div class="content content-1">content 1</div>
<div class="content content-2">content 2</div>

Стили для показа блоков с контентом:

.content { display: none; }
#tab-1:checked ~ .content-1 {display: block;}
#tab-2:checked ~ .content-2 {display: block;}

Answer 3

[profesor08]

В текущем варианте никак. Тебе надо удалить tabs-wrapper, чтоб твои инпуты были над food-box.

Но лучше напиши пару строк на JS.

Answer 4

[Арсений Матыцин]

Чтобы можно было реализовать данную логику, инпут должен находится:
1. Выше (раньше) последующего кода.
2. На том же уровне или выше (вложенности).

И так, как это геморройно, проще реализовать на JS. Такие приколюхи с селекторами уместны для стилизации чекбоксов и радиокнопок, а не тут.