Почему ~ не возвращает всех соседей?

Question

[Michail]

Код примера https://jsfiddle.net/euqb51oj/

Есть панель ссылок на якоря.
Ниже css который сдвигает, блок с якорем. Проблемам в #Learn:target ~ #I, ~ не возвращает I и к нему не присваивается стиль.

#Learn:target{
    left:0;
}
#Learn:target ~ #I{
    right: 110%;
}
#Learn:target ~ #Read{
    left: 110%;
}
#Learn:target ~ #Watch{
    left: 210%;
}

<div class='containers' id="I">
                <p>1</p>
            </div>
            <div class='container' id="Learn">
                    <p>2</p>
            </div>
            <div class='container' id="Read">
                    <p>3</p>
            </div>
            <div class='container' id="Watch">
                    <p>4</p>
            </div>

Подскажите пожалуйста как сделать такой слайдер, куда копать?

Answer 1

[Rsa97]

~ применяется к элементам, имеющим того же родителя и расположенным после целевого. #I имеет того же родителя, что и #Learn, но расположен раньше, соответственно не попадает под правило #Learn:target ~ #I.
ЕМНИП, CSS вообще не имеет селекторов для выбора предшествующего или родительского элементов.

Comments

[Michail]

Чут трудно на css такие штуки делать, не шарю(
Спасибо, я думал ~ вернет все и выше и ниже, если они на одном уровне.