Есть ли способ выбрать элемент, который не является дочерним?

Question

Есть ли способ выбрать элемент, который не является дочерним? Я не уверен, как это сказать или объяснить. Будем надеяться, что код будет говорить само за себя:

Fiddle: http://jsfiddle.net/kBhgV/3/

HTML:

<div title="section-1"> 
    <div> 
     <input type="checkbox" id="item-1"> 
      <label for="item-1">Item 1</label> 
     </input> 
    </div> 
</div> 
<div title="section-2"> 
    <div>Test Drop</div> 
</div> 

CSS:

[title=section-2] { 
    display: none; 
} 
input:checked ~ [title=section-2] { 
    display: block; 
} 

Есть ли способ, что, когда вы установите флажок, он будет показать раздел-2 без раздела 2 ребенка из раздела 1?

Answer 1

изменить код из

<div title="section-1"> 
    <div> 
     <input type="checkbox" id="item-1"> 
      <label for="item-1">Item 1</label> 
     </input> 
    </div> 
</div> 
<div title="section-2"> 
    <div>Test Drop</div> 
</div> 

в

<input type="checkbox" id="item-1"/> 
    <div title="section-1"> 
    <div> 
     <label for="item-1">Item 1</label> 
    </div> 
</div> 
<div title="section-2"> 
    <div>Test Drop</div> 
</div> 

, то ваш CSS должен работать нормально. Вы можете установить видимость вашего флажка в скрытое положение и расположить его абсолютно где-то со страницы.

мой сайт использует подобную технику для навигации, чтобы вы могли видеть, как это работает, проверяя код.

http://www.aktof.ca/

изменили скрипку

http://jsfiddle.net/kBhgV/4/