Почему не работает если id поменять на class?

Question

[Олечка Макеева]

Хочу, чтобы #ch:checked ~ применялось к разным элементам из разных контейнеров. Но, к сожалению, конструкцию можно использовать единожды, т.к. ID. Попробовала "id" поменять на "class", а"#" поменять на "." , но сайт вообще перестал функционировать как нужно.

Если идея с классом говно, то как по-другому можно реализовать задуманное?

Ниже прикреплю картинки. Поясняю: при нажатии на label "show more" у элемента container_biggest-c при #ch:checked ~ менялось значение margin-top, т.е. он должен отодвигаться вниз

Надеюсь, хотя бы кто-то понял чуть вопроса..... Извините за сумбурность

<div class="history-content">
                    
                    <input id="ch" type="checkbox">
                    <div class="history-photos">

                        <img class="ph ph1" src="img\oldph1.png" alt="">
                        <img class="ph ph2" src="img\oldph2.png" alt="">
                
                    </div>
                    <img class="arrow2" src="img\arrow2.png" alt="arrow to map">
                    <p class="history-text-p">
                        &nbsp&nbsp&nbsp&nbsp&nbspLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>&nbsp&nbsp&nbsp&nbsp&nbspQuis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. <br>&nbsp&nbsp&nbsp&nbsp&nbspLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor... 
                    </p>
                    <div class="history-text-p" id="more">
                        <p >
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium rem amet pariatur rerum sequi excepturi sint obcaecati tenetur, distinctio minus accusantium incidunt? Libero omnis voluptatibus, itaque aliquid eos expedita a! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum tempora deleniti praesentium perferendis magni possimus, numquam deserunt eveniet eaque architecto voluptatem maxime, consequuntur tempore non. Enim veniam placeat minus mollitia dolorum. Odio nisi laboriosam dolorum est sequi quidem rem quibusdam!
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque iure qui, eligendi natus quisquam nesciunt nihil reprehenderit distinctio quia dicta voluptas soluta corporis porro deleniti reiciendis culpa iste ea eos!
                            Commodi, cum molestiae? Delectus, libero molestiae. Recusandae esse nulla quaerat veniam explicabo ullam laboriosam nostrum expedita delectus qui sint perferendis, enim asperiores, voluptatem molestiae veritatis magni labore similique numquam eaque.
                        </p>
                        <label for="ch"><span class="wavy" data-content="Show less">Show less</span></label>
                    </div>
                    <div class="history-text-p" id="label">
                        <label for="ch"><span class="wavy" data-content="Read more">Read more</span></label>
                    </div>
                  
</div>

ХОЧУ ЧТОБЫ У ЭЛЕМЕНТА  Container_biggest-c ПРИ #ch:checked ~ МЕНЯЛОСЬ ЗНАЧЕНИЕ margin-top
        <div class="container_biggest-c" id="cbc">
            <div class="biggest-circle"></div>
        </div>

#ch{
    display: none;
}

#ch:checked ~ #label {
    display: none;
}

#ch:checked ~ #more {
    display: block;
}

#more{
    display: none;
}

Comments

[Ankhena]

Читайте https://htmlbook.ru/samcss/sosednie-selektory и соседние статьи.
Затем про :has