Слайдер 22/31

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

Не пойму, как эта хрень работает. Это не первое такое задание, но именно здесь я вообще встал в ступор. Может кто даст наводку на объяснение этой темы?
P.S. То, как объясняется в задании, я не понял тоже.

#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

такая кракозябра расшифровывается с конца
рассмотрим одну из строк (они идентичные)

#btn-1:checked ~ .slider-controls label[for=“btn-1”]

  1. label[for="btn-1"] - нас интересует подпись с атрибутом for, значение этого атрибута btn-1
  2. .slider-controls label[for="btn-1"] - вышеозначенная подпись должна существовать внутри элемента с классом slider-controls
  3. ~ .slider-controls label[for="btn-1"] - а теперь нас интересуют все подобные конструкции из пункта [2], следующие после элемента из пункта [4]. про такие конструкции говорят, что они родственны элементу [4]
  4. #btn-3:checked - якорь # означает, что нас интересует элемент с id=“btn-3”, при этом данный элемент должен иметь псевдокласс checked, а именно должен быть выбран

т.е. если есть элементы, которые соответствуют лишь частично данным пунктам, то они не попадают в выборку для правил CSS

надеюсь теперь стало проще понимать енту кракозябру

1 лайк
3

расставили все по полочкам. Благодарю, сеньор : )