regra CSS para o atributo + irmão no DOM

Question

O que eu tenho é uma forma com um conjunto de campos que contém vários outros fieldsets. Para cada conjunto de campos, o usuário pode verificar a caixa ao lado da lenda e expandir esse conjunto de campos (em teoria, pelo menos). Eu estava pensando que seria legal tentar usar CSS puro para o efeito, mas eu estou ficando pendurado sobre como escrever a regra com base na posição dois elementos um ao outro no DOM. Aqui está o 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>

No início, a idéia parecia um pouco truque-ish para mim, mas eu corri através do validador do W3C e yipiee passou com entradas embutidas dentro lendas. Então, eu tenho certeza que posso conseguir o que eu sou depois de usar javascript / jquery, mas eu odiaria ter pelo menos uma prova de conceito para fazê-lo com CSS, mesmo que navegadores mais antigos podem não apoiá-lo.

Eu tentei esta regra:

.area ul {
    color: red;
 }

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

Mas sem sorte. I confirmado com um teste muito mais simples que ambos os navegadores que eu estou trabalhando com (Chrome, FF 3.5) pode fazer input:checked + ul se é simplesmente uma entrada seguido por um ul. E ele faz alternar as cores se eu tiver ambas as regras (na versão simplificada).

Mas eu não tenho certeza se há uma maneira de se referir à UL se o elemento verificada é whithin a tag lenda e, portanto, não um irmão direta da UL. Existe talvez uma maneira de dizer "irmãos de lendas que contêm entradas que são verificados ..."?

Obrigado pela ajuda.

Answer 1

Não.

"irmãos de lendas que contêm inputs que são verificados ... "

Seu problema é na etapa de "conter". Você não pode mover-se o DOM assim. Um elemento não pode ser selecionado em CSS com base em crianças (ou conteúdos das crianças ou atributos).

Você também está usando um elemento de formulário para interação visual (e uma lenda), o que é estranho. Eu acho que você é melhor fora com javascript. Eu posso imaginar outras soluções somente CSS, mas nenhum que eu poderia esperar para ser suficiente navegador compatível com a confiança com escondendo e mostrando formas.

Answer 2

O selector adjacente (+) obviamente selecciona elementos adjacentes. Você precisa de um seletor de pai, que infelizmente não existe (apesar de algumas propostas feitas para o W3C no passado).

Javascript (parentNode) é a única opção.

Answer 3

Meu primeiro pensamento, é que isso não vai funcionar com CSS sozinho. Eu não acho que você vai ser capaz de fazer isso sem javascript. Você pode usar os seletores em jQuery, por exemplo, e obter o nó pai através de JavaScript.

Além disso, eu me perguntava se, depois de 'verificação' uma caixa de seleção, um padrão CSS iria coincidir com a entrada [verificado = 'verificado'] ... como:

entrada .area + ul { // não expandida }

entrada .area [verificado = 'verificado'] + ul { // expandida }

Não funcionou embora assim que você precisa usar javascript apenas para implementar a mudança na verificado / desmarcado. Eu tinha usos algo diferente de uma caixa de seleção, como sugerido anteriormente também.