regla CSS para el atributo + hermano de DOM

Question

Lo que tengo es un formulario con un conjunto de campos que contiene varios otros conjuntos de campos. Para cada conjunto de campos, el usuario puede comprobar una caja junto a la leyenda y ampliar que fieldset (en teoría, al menos). Estaba pensando que estaría bien intentar usar CSS puro para el efecto, pero me voy a colgar en la forma de escribir la regla basada en la posición de dos elementos entre sí en el DOM. Aquí está el código 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>

Al principio, la idea parecía un poco hackear-ish a mí, pero lo pasó por el validador del W3C, y yipiee pasó con entradas incrustadas en leyendas. Así que estoy seguro de que puedo conseguir lo que estoy después de usar Javascript / jQuery, pero no me gustaría tener al menos una prueba de concepto para hacerlo con CSS, incluso si los navegadores antiguos no sean compatibles con ella.

He intentado esta regla:

.area ul {
    color: red;
 }

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

Pero sin suerte. He confirmado con una prueba mucho más simple que los dos navegadores con los que trabajo (Chrome, FF 3.5) pueden hacer input:checked + ul si es simplemente una entrada, seguido de ul. Y lo hace alternar colores si tengo dos reglas (en la versión simplificada).

Pero no estoy seguro si hay una manera de referirse a la UL comprobado si el elemento es whithin la etiqueta de leyenda y por lo tanto no un hermano directa de la UL. ¿Existe tal vez una manera de decir "hermanos de leyendas que contienen entradas que se comprueban ..."?

Gracias por la ayuda.

Answer 1

Nop.

  

"hermanos de leyendas que contienen   insumos que se comprueban ... "

Su problema es en la etapa de "contener". No se puede mover hacia arriba el DOM de esa manera. Un elemento no puede ser seleccionado en el CSS basado en los niños (o los contenidos de los niños o atributos).

También está utilizando un elemento de formulario para la interacción visual (y una leyenda), que es impar. Creo que está mejor con Javascript. Puedo imaginar otras soluciones CSS-solamente, pero ninguno que yo esperaría que fuera suficiente para confiar en ocultar y mostrar las formas compatibles navegador.

Answer 2

El selector adyacente (+) obviamente selecciona elementos adyacentes. Es necesario un selector de matriz, que por desgracia no existe (a pesar de algunas propuestas presentadas al W3C en el pasado).

Javascript (parentNode) es la única opción.

Answer 3

Lo primero que pensé, es que esto no va a trabajar con CSS solo. No creo que usted será capaz de hacer esto sin javascript. Se pueden utilizar los selectores de jQuery, por ejemplo, y obtener el nodo padre a través de JavaScript.

Además, me preguntaba si, después de una casilla de verificación 'comprobar', un patrón CSS coincidiría con la entrada [revisado = 'marcado'] ... como:

entrada .area + ul { // No ampliado }

.area de entrada [comprobado = 'verificado'] + ul { // expandido }

No funcionó, aunque por lo que había necesidad de usar javascript sólo para implementar el cambio en la comprobados y / o sin marcar. Me había usa algo más que una casilla de verificación como se sugirió anteriormente también.