DOM의 속성 + 형제에 대한 CSS 규칙

Question

내가 가진 것은 하나의 필드 세트가 다른 여러 필드 세트를 포함하는 양식입니다. 각 필드 세트에 대해 사용자는 범례 옆에있는 상자를 선택하고 해당 필드 세트를 확장 할 수 있습니다 (이론적으로는 최소한). 효과를 위해 순수한 CSS를 사용하는 것은 멋지다고 생각했지만, DOM에서 두 요소의 위치를 ​​기반으로 규칙을 작성하는 방법이 궁금합니다. 다음은 HTML의 : 먼저 생각에서

<fieldset id="areasofinterest"> 
    <legend>Areas of Interest Survey</legend> 

<p>Please Check The Areas Applicable to you and Answer the Coorepsonding Questions.</p> 

<!--Area 1 Checkbox and Questions --> 
<fieldset class="area"> 
    <legend> 
     <input type="checkbox" value="area1" id="area1" /> 
     <label for="area1"> Area 1 :</label> 
    </legend> 
    <ul> 
     <li> 
      <label for="area1_q1">Q1</label> 
      <input type="text" name="area1_q1" id="area1_q1" /> 
     </li> 
     <li> 
      <label for="area1_q2">Q2</label> 
      <input type="text" name="area1_q2" id="area1_q2" /> 
     </li> 
    </ul> 
</fieldset> 

<!--Area 2 Checkbox and Questions --> 
<fieldset class="area"> 
    <legend> 
     <input type="checkbox" value="area2" id="area2" /> 
     <label for="other"> Area 2 :</label> 
    </legend> 

    <ul> 
     <li> 
      <label for="area2_q1">Q1</label> 
      <input type="text" name="area2_q1" id="area2_q1" /> 
     </li> 
     <li> 
      <label for="area2_q2">Q2</label> 
      <input type="text" name="area2_q2" id="area2_q2" /> 
     </li> 
    </ul> 
</fieldset> 

    </fieldset> 

나에게 조금 해킹 틱 듯하지만은 W3C 유효성 검사기를 통해 실행하고,이 전설에 내장 된 입력을 통과 yipiee. 그래서 나는 내가 javascript/jquery를 사용하여 얻은 것을 얻을 수 있다고 확신하지만, 구 브라우저가 그것을 지원하지 않을지라도 적어도 CSS를 사용하여 개념을 증명할 것을 싫어한다.

.area ul { 
    color: red; 
} 

.area input:checked + ul { 
    color: blue; 
} 

하지만 운 :

나는이 규칙을 시도했다. 훨씬 간단한 테스트를 통해 내가 함께 작업하고있는 두 브라우저 (FF3.5)는 입력이 단순히 ul 인 경우 input:checked + ul을 수행 할 수 있음을 확인했습니다. 그리고 두 규칙이 모두있는 경우 색상을 전환합니다 (단순화 된 버전에서).

하지만 체크 된 요소가 범례 태그에 whithin이고 따라서 UL의 직접적인 형제가 아닌 경우 UL을 참조 할 방법이 있는지 확실하지 않습니다. "입력 사항을 포함하는 전설의 형제 자매"라고 말할 수있는 방법이 있습니까?

도움 주셔서 감사합니다.

Answer 1

아니요.

" 입력을 포함 전설의 형제 ... 확인되는"

귀하의 문제는 "포함"단계에있다. 그런 식으로 DOM을 움직일 수는 없습니다. 자식 요소 (또는 자식 내용 또는 특성)를 기반으로 CSS에서 요소를 선택할 수 없습니다.

또한 시각적 인 상호 작용 (및 범례)을 위해 양식 요소를 사용하고 있는데 이는 이상합니다. 나는 당신이 자바 스크립트로 더 나아 졌다고 생각한다. 나는 다른 CSS 전용 솔루션을 상상할 수 있지만 폼을 숨기고 표시하는 데 충분히 신뢰할 수있을 것으로 기대되는 브라우저는 없습니다.

Answer 2

내 첫 번째 생각은 CSS만으로는 작동하지 않는다는 것입니다. 나는 당신이 자바 스크립트없이 이것을 할 수있을 것이라고 생각하지 않는다. 예를 들어, jQuery에서 선택기를 사용하고 Javascript를 통해 부모 노드를 가져올 수 있습니다.

.area 입력 + UL { 은 확장되지 // :

또한, 나는이 확인란을 '확인'한 후, CSS의 패턴이 입력을 일치합니다, 경우 같은 ... [= '확인'확인] 궁금 }

.area 입력은 [확인 = '확인'] + UL { //이 를 확장}

그래서 당신은 단지 선택의 변화를 구현하기 위해 자바 스크립트를 사용해야 할 것입니다하지만 그것은 작동하지 않았다/선택하지 않았습니다. 나는 이전에 제안 된 것처럼 체크 박스 이외의 것을 사용하고 싶다.

Answer 3

인접 선택기 (+)는 인접 요소를 분명히 선택합니다. 상위 셀렉터가 필요합니다. 불행히도 존재하지 않습니다 (과거에 w3c에 대한 일부 제안에도 불구하고).

자바 스크립트 (parentNode) 만 선택할 수 있습니다.