Dima Polos

Еще вот такой вариант: https://jsfiddle.net/pghypd8t/

Ответ уже дан, просто объясню, селектор + действует только на следующий элемент после данного, самый ближайший, а тильда ~ выбирает любой следующий элемент, но не предыдущий.

display: flex;
flex-direction: column;
jastify-content: center;
далее только маржины между элементами задать равномерно, иначе будет перекос, или все эти элементы загнать в еще контейнер и отцентровать только этот контейнер просто задав родителю display: flex, а контейнеру margin: auto.

Насколько я помню, то css не дает такой возможности, как ни странно, зато js поможет)
https://stackoverflow.com/questions/1817792/is-the...
Ссылка выше подтверждает.
На jQ можно так: $(selector).prev(). Причем метод .prev(selector) тоже принимает селектор, так что можно и на два три элемента назад из ряда добраться.

Можно обойтись, но с сеткой быстрее и проще, ведь в сетке вся прелесть, что она уже имеет все медиа запросы, плюс в сетке учтены межколоночный интервал и паддинги по краям. Сами посудите, если в каждом проекте надо писать ширину, межколоночник, паддинги по бокам, бордер-бокс, а потом тучу медиа запросов, не рациональнее это все сохранить себе в библиотеку, чтоб потом много раз использовать? Вот, и по сути такая библиотека и есть сетка) Советую вот этот канал, там очень много про это: https://youtu.be/mVxkR50XL_E
И да сетка нужна там, где нужна сетка, везде ее пихать нет смысла, например пункты меню ставить по сетке не имеет смысла.

Не работает и работает не будет! Надо понимать, что такое переход из состояния в состояние, а что такое дискретность. Дело в том, что есть состояния, которые плавно перетекают, а есть только такое или такое. Например, ребенок растет плавно, вот ребенку один год, вот прошло два месяца и уже год и 2 месяца, как ни странно, а вот ему уже 43, а есть (сейчас не будем про хирургию) дискретное состояние ребенка или человека, это девочка или мальчик, человек либо родился такого пола, либо другого, нет переходного состояния, как в случае с возрастом. Зачем это понимать и знать? Потому что transition отработает только для свойств, которые переходные, но не дискретные. Например, есть ширина 0 пкс, добавим 1 пкс и ширина уже 1пкс, добавим еще 20 - 20пкс, такое свойство можно анимировать. Есть прозрачность 0, а есть 0.1, а есть 0.2, 0.5, 1 - тоже можно. Но, есть display: block, а есть display: none, это дискретные состояния, либо есть, либо нет, анимации не будет, зато можно блок показать/скрыть с помощью анимации на его ширину, высоту, прозрачность... Цвет, как ни странно это тоже величина, которая имеет переходные состояния, например в препроцессорах можно написать #ccc + #eee и получить новый цвет, так как цвета задаются, по сути, просто числом, и увеличивая/уменьшая число получаем анимацию. А какой переход между двумя картинками? Никакого, только такая картинка или такая, поэтому, чтобы сделать плавную анимацию надо пробовать, разве что, прозрачность блока с фоновым изображением.

<input type="radio" checked name="dva" id="dva1"/>
<label for="dva1"><img src="/upload/s1p1.png" class="notChecked"><img src="/upload/s1p2.png" class="ifChecked"></label>
<style>

input:checked + label img.ifChecked{
  display: block;
}

input:checked + label img.notChecked{
  display: none;
}

input + label img.ifChecked{
  display: none;
}

input + label img.notChecked{
  display: block;
}


</style>

https://jsfiddle.net/z8b5cune/