Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Xarlie en 17 de Octubre 2014, 19:55
-
Buenas de nuevo y de nuevo gracias por estos grandes cursos :)
En la entrega nº 15 de CSS nos dan como ejercicio resuelto este pequeño codigo html
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
<!-- fin menu -->
en el cual debemos definir que esta lista es de clase (class) especial. La clase especial no tendrá estilos especificados. En cambio, deberá definirse que los elementos li dentro de la lista ul de clase especial tengan color de fondo gris para los elementos impares (primero, tercero, quinto, séptimo…) y color de fondo rosa para los elementos pares (segundo, cuarto, sexto, octavo…).
el codigo css incluido en la solucion es el siguiente
ul.especial li:nth-child(odd) {background-color: grey;}
ul.especial li:nth-child(even) {background-color: pink;}
el cual al igual que otra de las opciones validas para solucionar el ejercicio no me funciona
He probado simplemente con ul y con li y funcionan perfectamente excepto cuando entra en juego el atributo class
ul li:nth-child(odd) {background-color: grey;}
ul li:nth-child(even) {background-color: pink;}
de esta manera funciona pero logicamente tendria problemas mas adelante en el caso de tener varias listas definidas con el atributo class
Una vez mas muchas gracias por tu esfuerzo un saludo :)
-
Hola, si pruebas el código que indica la solución del ejercicio debería funcionarte:
<html>
<head>
<title>Cursos aprenderaprogramar.com </title>
<meta charset="utf-8" />
<style type="text/css">
ul.especial li:nth-child(odd) {background-color: grey;}
ul.especial li:nth-child(even) {background-color: pink;}
</style>
</head>
<body>
<ul class="especial">
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
<!-- fin menu -->
</body>
</html>
¿Esto no te funciona?
-
Hola Alex muchas gracias por contestar.
Por alguna extraña razon que desconozco totalmente, el dia que estuve probando y postee no funcionaba y lo probe por activa y por pasiva una y otra vez y nada...
Como indiqué, probé quitando el atributo class especial y funcionaba.
El caso es que ahora me funciona con el atributo class especial sin haber tocado absolutamente nada, no se si es que el navegador se vuelve loco o que pero realmente me ha dejado anonadado, muchas gracias de todas maneras por contestar ;)