Почему не работает display на радио-кнопке по селектору :checked?

Question

[Вадим Рахманов]

<div class="slider">
            <div class="slider-container">
                <h1 class="slide1">It’s Time to Relax & Take Care of  Yourself</h1>
                <h1 class="slide2">We Serve You for All Your Beauty Needs</h1>
                <h1 class="slide3">Your Beauty Starts Here</h1>
                <div class="radioslide">
                <input id="slide1show" type="radio" name="slide">
                <input id="slide2show" type="radio" name="slide">
                <input id="slide3show" type="radio" name="slide">
                </div>
                </div>

div.slider-container {
    position: relative;
}

div.radioslide {
    display: inline;
    position: absolute;
    right: 20em;
    top: 20em;
}

h1.slide1 {
    position: absolute;
    right: 2em;
    top: 7em;
    display: none;
}

h1.slide2 {
    position: absolute;
    right: 2em;
    top: 7em;
    display: none;
}

h1.slide3 {
    position: absolute;
    right: 2em;
    top: 7em;
    display: none;
}

input#slide1show:checked h1.slide1 {
    display: inline;
}

Проблема такова, нужно сделать так, чтобы при выборе радио-кнопки отображался display, то есть когда input#slide1show выбран, то становится видимым контент h1.slide1 и так со всеми.

Answer 1

[Шохрух Шаймардонов]

Почему не работает display на радио-кнопке по селектору :checked?

Потому что селектор неверный.
С вашей разметкой не получится добиться желаемого без js. Ибо вы хотите достучаться до элемента, который по факту находится выше чем целевой элемент.
А ваш нынешний селектор ишет вложенный в инпут заголовок(т.е. дочерний), а его как видим нет там, и не может быть

Comments

[Вадим Рахманов]

А возможно как-то поменять разметку или тут вообще без JS никак?

[Шохрух Шаймардонов]

Вадим Рахманов, разметку можно поменять

[Шохрух Шаймардонов]

Вадим Рахманов, посмотрите как тут реализовано и делайте свой вариант

Answer 2

[Павел]

С такой версткой - только js.
Если css, нужно поменять верстку и подправить css