Как изменить display в div при radio: checked (без JS!)?

Question

<div class="products">

<div class="bar_radios">
<input type="radio" name="bar" id="bar1">
<input type="radio" name="bar" id="bar2"> 
</div>
 
<div class="prod"></div> 
<div class="prod"></div> 
<div class="prod"></div> 
<div class="prod"></div> 
<div class="prod"></div> 
<div class="prod"></div> 
<div class="prod"></div>

</div>

.prod { display: inline-block; width: 100px; height: 100px; background-color: #000; margin: 20px; }
 input#bar1:checked~.prod { display: block; }
 input#bar2:checked~.prod { display: inline-block; }

Answer 1

Расположите радиокнопки вне обёртки .bar_radios. Каскадные таблицы стилей потому и называются каскадными, что идут в одном направлении по нисходящей. Радиокнопки и нужные Вам блоки должны иметь одного общего родителя.

.prod {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 20px;
}

input#bar1:checked~.prod {
  display: block;
}

input#bar2:checked~.prod {
  display: inline-block;
}

<div class="products">

  <input type="radio" name="bar" id="bar1">
  <input type="radio" name="bar" id="bar2">
  <div class="bar_radios"></div>

  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>

</div>

БЛОГ НА HUSL

Как изменить display в div при radio: checked (без JS!)?

Ответы (1 шт):