0

que tal? hace poco he tenido este problema en el cual al querer poner el comando "nth-child" lo toma como valido en varias funciones salvo en esta. Saben a que se puede deber ese error? lo he probado tanto con html como con CSS. aquí el código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="grido.css" rel="stylesheet" type="text/css">
    <title>Erick__16 </title>

    <style>
      .prueba > div:nth-last-child(odd){
        background: blue;
      }
      .prueba > div:nth-child(even){
        background: red;
      }

    </style>

  </head>
  <body>
    <div class="prueba">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident assumenda adipisci ex tempore facere culpa ducimus, nihil veritatis, vero tenetur ipsum vel voluptatum illo neque, dicta quasi in! Possimus, deserunt!
    </div>

    <div class="prueba"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae nostrum corrupti error in magnam quia tenetur praesentium perspiciatis voluptas, autem facere deleniti! Sit error tempora impedit quibusdam, labore officia quam.
    </div>
  </body>
</html>
1
  • Ayudaría nos compartas que regla de selección tratas de armar
    – user128299
    Commented el 3 may. 2020 a las 20:59

2 respuestas 2

0

espero ayudarte.

Me fijé que en el CSS lo que estas haciendo es referirte a todos los elementos div que sean hijos de la clase CSS .prueba, y en el html como no existe el esa estructura pues no hace nada, lo que podrías hacer es lo siguiente.

Podrías referirte directamente a los elementos con la clase CSS .prueba:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="grido.css" rel="stylesheet" type="text/css">
	<title>Pruebas</title>
	<style>
		.prueba:nth-child(even) {
			background: red;
		}

		.prueba:nth-last-child(odd) {
			background: blue;
		}
	</style>
</head>
<body>
	<div class="prueba">
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident assumenda adipisci ex tempore facere culpa ducimus, nihil veritatis, vero tenetur ipsum vel voluptatum illo neque, dicta quasi in! Possimus, deserunt!
	</div>
	<div class="prueba">
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae nostrum corrupti error in magnam quia tenetur praesentium perspiciatis voluptas, autem facere deleniti! Sit error tempora impedit quibusdam, labore officia quam.
	</div>
</body>
</html>

Podrías referirte a los hijos que tengan la clase CSS .prueba:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="grido.css" rel="stylesheet" type="text/css">
	<title>Pruebas</title>
	<style>
		.prueba p:nth-child(even) {
			background: red;
		}

		.prueba p:nth-last-child(odd) {
			background: blue;
		}
	</style>
</head>
<body>
	<div class="prueba">
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident assumenda adipisci ex tempore facere culpa ducimus, nihil veritatis, vero tenetur ipsum vel voluptatum illo neque, dicta quasi in! Possimus, deserunt!</p>
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae nostrum corrupti error in magnam quia tenetur praesentium perspiciatis voluptas, autem facere deleniti! Sit error tempora impedit quibusdam, labore officia quam.</p>
	</div>
</body>
</html>

1
  • muchas gracias Jonas! es la solucion que mas logica me parece pasa que justo vi un tutorial que hacia todo en html y lo estaba copiando. pero si, cuando he probado como decias me ha funcionado. muchisimas gracias!
    – Gabriel
    Commented el 3 may. 2020 a las 22:59
0

Como su nombre lo indica la pseudo-clase nth-child es usada para seleccionar los hijos de un elemento html así como lo explican en MDN tendría la forma

.selector-padre .selector-hijo:nth-(child o last-child){ regla css }

en tu caso el elemento con el selector .prueba no tiene ningun hijo en su estructura css por tal motivo el selector div:nth-* no puede encontrar el elemento al cual aplicar las reglas css.

analizando tu codigo creo que lo que tratas de hacer es colorear el primer div azul y el segundo div rojo lo cual puedes lograr con el siguiente snippet en el cual cambie el css para seleccionar el body como padre y .prueba como los selectores hijos

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="grido.css" rel="stylesheet" type="text/css"> <title>Erick__16 </title>
<style> 
body > .prueba:nth-last-child(odd){ 
 background: blue; 
}
body > .prueba:nth-child(even){ 
 background: red; 
} 
</style> 
</head> 
<body>
<div class="prueba"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident assumenda adipisci ex tempore facere culpa ducimus, nihil veritatis, vero tenetur ipsum vel voluptatum illo neque, dicta quasi in! Possimus, deserunt! </div>
<div class="prueba"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae nostrum corrupti error in magnam quia tenetur praesentium perspiciatis voluptas, autem facere deleniti! Sit error tempora impedit quibusdam, labore officia quam. 
</div>
</body>
</html>

2
  • En este caso esa pseudo clase elegirá del último elemento había atrás solo los pares es decir de forma inversa
    – user128299
    Commented el 3 may. 2020 a las 22:30
  • eso era! muchas gracias! al final no estaba captando el tema de la parentalidad entre funciones pero me lo has clarificado
    – Gabriel
    Commented el 3 may. 2020 a las 22:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.