[SOLUCIONADO] Tengo un problema en CSS y HTML, selectores

Andrewone · #1 (**permalink**) 10/01/2014, 17:33

Bueno, pues mi problema consiste en que tengo ciertos div con opacidad = 0 y en determinado momento deseo cambiar la propiedad de opacidad por 1, al inicio todo funcionaba bien, hasta que agregué el div pestanas. La estructura es la siguiente:

HTML:

Código HTML:

Ver original<body>
     <div id="contenedor">
         <div id="pestanas">
                <input id="tab1" type="radio" name="tab-group" checked />
                <label for="tab1"><img src="Images/escribir16.png">...</label>
                <input id="tab2" type="radio" name="tab-group" />
                <label for="tab2"><img src="Images/codigo16.png">...</label>
                <input id="tab3" type="radio" name="tab-group" />
                <label for="tab3"><img src="Images/alumno16.png">...</label>
            </div>
            <div id="contenido">
                <div id="cont1">
                    <p class="left"><img src="Images/escribir48.png" alt=""> ...</p>
                </div>
                <div id="cont2">
                    <p><img src="Images/codigo48.png" alt="">...</p>
                </div>
                <div id="cont3">
                   <p><img src="Images/alumno48.png" alt="">...</p>
                </div>
            </div>
        </div>
</body>

Y estoy intentando cambiar la opacidad desde el CSS:

Código CSS:

Ver original#pestanas input#tab1:checked ~ #contenido #cont1, 
#pestanas input#tab2:checked ~ #contenido #cont2,
#pestanas input#tab3:checked ~ #contenido #cont3{
    opacity: 1;
    z-index: 100;
}

Sinceramente soy nuevo en esto como desde hace tres días y no se muy bien como acceder.

g3kdigital · #2 (**permalink**) 10/01/2014, 18:21

El problema lo tienes precisamente al separarlos en "div", yo mismo tuve ese problema. Hasta que me puse a investigar como funcionaba el operador css " ~ ", ya que solo funciona sobre los "hijos hermanos" de un mismo padre, es decir, al encerrarlos en dos div diferentes, pasan a ser "primos" por ser hijos anidados en diferentes "padres" ponerlo en cierto sentido.

Por lo que sí, debes de tener anidados todos los elementos dentro de un mismo elemento padre html. Sí utilizas esa estructura porque tu fin es afectar varios elementos el tiempo, te recomiendo mejor usar "class" que "id" o combinarlos.

Andrewone · #3 (**permalink**) 10/01/2014, 18:43

Entonces me sería algo así?

Código CSS:

Ver original#contenedor div#pestanas input#tab1:checked ~ #contenedor div#contenido #cont1, 
#contenedor div#pestanas input#tab2:checked ~ #contenedor div#contenido #cont2,
#contenedor div#pestanas input#tab3:checked ~ #contenedor div#contenido #cont3{
    opacity: 1;
    z-index: 100;
}

O de plano no se puede?

pzin · #4 (**permalink**) 10/01/2014, 19:05

Bienvenido al foro.

Como en la propia naturaleza, aquello de "hijos hermanos" es una aberración que no debería de existir. Y esto en CSS tampoco existe.

~ sirve para seleccionar todos los hermanos sucesores, funciona de forma parecida a + con la salvedad de que este último sólo selecciona el hermano sucesor directo.

En CSS de momento no existe forma de subir por la jerarquía de los elementos.

Tal como tienes la estructura, lo que quieres hacer sólo puedes lograrlo usando JavaScript.

Cuando publiques código usa la opción highlight.

Andrewone · #5 (**permalink**) 10/01/2014, 19:12

Ok , bueno pues gracias por el consejo entonces y hasta la próxima.

Aunque si ves lo que respondiste estás contra diciéndote un poco, ya que en la naturaleza si existen los "hijos hermanos".

pzin · #6 (**permalink**) 11/01/2014, 13:28

Cita:

Iniciado por Andrewone

Ok , bueno pues gracias por el consejo entonces y hasta la próxima.

Aunque si ves lo que respondiste estás contra diciéndote un poco, ya que en la naturaleza si existen los "hijos hermanos".

Claro, pero seguro que salen un poco tontorrones.

Si un hijo es a la vez tu hermano, entonces hiciste algo que no deberías de haber hecho. Ya lo que hagan los monos es otra historia.