Autor Tema: CU01015D Selectores avanzados CSS uso de odd y even elementos impares y pares (Leído 3679 veces)

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

Código: [Seleccionar]

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

Código: [Seleccionar]

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

Alex Rodríguez · « **Respuesta #1 en:** 19 de Octubre 2014, 21:30 »

Hola, si pruebas el código que indica la solución del ejercicio debería funcionarte:

Código: [Seleccionar]

<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?

Xarlie · « **Respuesta #2 en:** 20 de Octubre 2014, 19:52 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: