CSS 형제 자매를 기반으로 한 요소 선택

Question

나는 직장에서 프로젝트를 망설이고 있으며 내가가는 것처럼 내 머리를 CSS 주변에서 얻으려고한다. 많은 실패한 시도 후에 확인란을 기반으로 토글 스위치를 만들었지 만 지금은 확인란의 상태에 따라 형제 요소의 스타일을 변경하려고합니다. 내가 원하는 무엇

Here is a fiddle showing my code

체크 박스가/체크되지 않은 체크 할 때 <span class="toggleLabel"> 변경 색상 내에서 복사본을 가지고있다.

나는 이것이 간단하고 그 해결책을보기에는 너무 오랫동안보고 있었으면 좋겠다.

본인은이 코드와 관련이 없으므로 필요한 경우 HTML 또는 CSS를 재정렬 할 수 있습니다. 이것에 관해 조언 할 시간과 성향이 있다면 크게 감사하겠습니다.

환호

Answer 1

CSS에서 부모를 선택할 수 없습니다. 아직 없습니다. CSS만으로이 작업을 수행 할 수있는 유일한 방법은 스팬이 입력의 형제가되도록 HTML을 재정렬하는 것입니다. 그런 다음 :checked ~ .toggleLabel을 사용할 수 있습니다.

HTML을 재정렬하고 싶지 않거나 재 배열 할 수없는 경우 JavaScript 만 선택할 수 있습니다.

http://jsfiddle.net/aLH3u/3/