Как поправить css верстку?

Question

[Антон]

https://codepen.io/anon/pen/qxjwdO
Есть такой кусочек кода:

#radio1:checked ~ .desc1{
    display: block;
}

Чекая первое радио, показывается див desc1, но чего то не срабатывает это.

Answer 1

[tyzberd]

https://codepen.io/anon/pen/mXwgQx

Comments

[Антон]

А как сделать, чтобы то, что появляется, появлялось не с низу, а сбоку напротив того, что нажали?

[tyzberd]

я бы сделал так https://codepen.io/anon/pen/JpJQyV

Answer 2

[Антон]

Потому что .desc1 не является вложенным в инпут элементом.

<input type="radio" name="radio" value="radio1" id="radio1"><div class="desc1">Постамат - автоматизированный терминал выдачи заказов</div>  </input>

Comments

[Антон]

Спасибо. Да. Так оно и есть. Но вроде раньше, я делал как то по другому. Почему помню, потому, что закрывающий тег у инпута не использую обычно.

[Антон]

anton99zel, Ну уберите атрибут checked из css и увидите обыкновенную вложенность
input .desc1, и тут тоже самое, вы обращаетесь ко вложенному элементу по параметру checked.

Если хотите сделать независимо от вложенности, Вам лучше сделать сие на js/jq

[Ankhena]

Потому что .desc1 не является вложенным в инпут элементом.

брррр
В вопросе в CSS написана тильда ~ , а это соседний селектор, который и не предполагает, что desc1 будет вложен в input. И тег input одиночный.

[Антон]

Ankhena, так как лучше сделать?

[Ankhena]

anton99zel, у вас есть ответ tyzberd и он верный

#radio1:checked ~ .desc1 тильда означает что .desc1 находится на одном уровне с чекнутым инпутом и в коде идет после него. Если нужно, чтобы визуально чекбоксы шли после блоков, то они туда отправляются либо с помощью order (родитель должен иметь display: flex) либо инпуты скрываются, а внизу размещаются label с атрибутом for. который свяжет их с инпутами. Второй вариант хорош тем, что label можно стилизовать как угодно.

[Антон]

Ankhena, Кстати, да, что-то я не заметил ее