Слайдер на CSS, шаг 3 [22/31]

Курсы §24. Мастерская: декоративные эффекты. Часть 2
1

Добрый вечер) Помогите разобраться с ~ и cheсked. Не могу понять как именно это работает и почему если убрать ~ в приведенном ниже коде, то cо слайдером ничего происходить не будет.

#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
    background-color: #666666;
}

Screenshot_6

CSS:

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    color: #333333;
    background-color: #f5f5f5;
}
 
section {
    width: 450px;
    margin: 40px auto;
    background-color: white;
    box-shadow: 0 0 3px #cccccc;
}

h1 {
    margin: 0;
    padding: 10px 0;
    font-size: 28px;
    font-weight: normal;
    text-align: center;
}

.slider {
    position: relative;
}

.slider input[type=radio] {
    display: none;
}

.slider-inner {
    overflow: hidden;
}

.slider-slides {
    width: 300%;
    transition: transform 0.8s ease;
}

.slider-slides img {
    float: left;
    width: 450px;
    height: 320px;
}

.slider-controls {
    margin-bottom: 10px;
    text-align: center;
}

.slider-controls label {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    border: 4px solid white;
    border-radius: 50%;
    background-color: #cccccc;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
    background-color: #666666;
}
2

http://htmlbook.ru/css/selector/sibling

1 лайк
3

В этом разобрался) Но почему не работает данный метод. Сейчас подумал и понял, что эта конструкция не будет работать именно из-за отсутствия ~ после псевдокласса, т.к. без него получается что label должен бы лежать в inpute.

#btn-1:checked .slider-controls label[for="btn-1"],
#btn-2:checked .slider-controls label[for="btn-2"],
#btn-3:checked .slider-controls label[for="btn-3"] {
    background-color: #666666;
}
4

Верно.

Из этой шпаргалки сразу понятно почему работает первый вариант и не работает второй.
http://only-css.com/blog/article/selektory-css3

…и для закрепления пройденного:
http://only-css.com/blog/article/karusel-s-lyubym-kolichestvom-elementov-i-navigaciey

1 лайк