Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con nth-child

Estas en el tema de Problema con nth-child en el foro de CSS en Foros del Web. Hola... Estoy teniendo un problema con nth-child... No es la primera vez que lo uso y nunca me ha dado problemas, pero por el tipo ...
  #1 (permalink)  
Antiguo 25/06/2014, 04:31
 
Fecha de Ingreso: septiembre-2011
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Problema con nth-child

Hola...

Estoy teniendo un problema con nth-child... No es la primera vez que lo uso y nunca me ha dado problemas, pero por el tipo de porgramación que lleva la web hay varios divs dentro de otros y es lo que creo que hace conflicto y no me hace caso...

Os pongo el codigo y lo entendereis mejor... Os pongo un ejemplo, que poner todo el codigo de la web es enorme, pero me he dado cuenta que con este pequeño ejemplo tambien pasa...

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nth-child</title>
</head>

<style>

#caja:nth-child(odd) { background:red; }

#caja:nth-child(even) { background:grey; }
	
#texto:nth-child(odd) { color:blue; }
	
#texto:nth-child(even) { color:white; }

</style>

<body>

<div id="contenedor">
	<div id="caja">
    	<div id="texto">TEXTO 1</div>
    </div>
    <div id="caja">
    	<div id="texto">TEXTO 2</div>
    </div>
  	<div id="caja">
    	<div id="texto">TEXTO 3</div>
    </div>
    <div id="caja">
    	<div id="texto">TEXTO 4</div>
    </div>
</div>

</body>
</html>
Y el resultado es este:

http://www.juanitakalamidad.com/nth-child.html

Como veis el texto del fondo gris es azul, cuando yo en los estilos le he dicho que lo ponga en blanco...

No sé si es que estoy haciendo algo mal... El codigo de la web no es mio, es reutilizado, quien la programo antes que yo hizo lo de los divs dentro de divs... Me gustaria poder solucionarlo sin tener que cambiar mucho la programación, simplemente con los estilos... Pero si veis que es imposible solucionarlo con estilos, ¿que deberia cambiar del codigo para poder solucionar el problema?.

Podeis descargaros ese pequeño html para hacer pruebas...

Quizas sea una tonteria, pero llevo ya unas cuantas horas y no hoy con la solución...

Os agradeceria enormemente vuesta ayuda...

Un saludo!!!!!!!
  #2 (permalink)  
Antiguo 25/06/2014, 05:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con nth-child

En ningún lugar has puesto que el color de texto de esos elementos sea en blanco. En ningún lugar tienes algún #texto que sea el hijo par de su elemento contenedor.

Que por cierto, un identificador es único en el documento HTML, así que no debe de repetirse; luego tu código no pasará ningún validador y está mal.
__________________
(:
  #3 (permalink)  
Antiguo 25/06/2014, 05:53
 
Fecha de Ingreso: septiembre-2011
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problema con nth-child

Cita:
Iniciado por pzin Ver Mensaje
En ningún lugar has puesto que el color de texto de esos elementos sea en blanco. En ningún lugar tienes algún #texto que sea el hijo par de su elemento contenedor.

Que por cierto, un identificador es único en el documento HTML, así que no debe de repetirse; luego tu código no pasará ningún validador y está mal.
Gracias por tu rapida respuesta...

Pero si que he puesto que el #texto sea blanco... Esta en los estilos... Asi:

#texto:nth-child(even) { color:white; }

Ya te digo que el codigo no es mio, lo hizo otra persona antes y yo lo estoy midificando... Los divs los tenia mas o menos así...

¿Alguna sugerencia?

Gracias!!!!!!!
  #4 (permalink)  
Antiguo 25/06/2014, 06:00
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con nth-child

Cita:
Iniciado por JE5U5 Ver Mensaje
Pero si que he puesto que el #texto sea blanco... Esta en los estilos... Asi:

#texto:nth-child(even) { color:white; }
Tienes puesto que los hijos que sean pares sean de ese color. Y no hay ningún elemento hijo par, porque todos son impares, ya que según tu HTML, siempre son los primeros hijos de cada elemento, y el número uno es impar.
__________________
(:
  #5 (permalink)  
Antiguo 25/06/2014, 06:32
 
Fecha de Ingreso: septiembre-2011
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problema con nth-child

Vale, ahora he entendido perfectamente porque no me lo coge...

¿Sabrias decirme entonces que tendria que poner en la hoja CSS para que funione lo que quiero hacer?

Gracias por las molestias que te estas tomando... Pero es que no consigo dar con la solución...
  #6 (permalink)  
Antiguo 25/06/2014, 06:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Problema con nth-child

Pues ya que quieres afectar al hijo de cada segundo elemento #caja*, ese :nth-child se lo tendrás que colocar a este último:

Código CSS:
Ver original
  1. #caja:nth-child(even) #texto {}

* Insisto que debería de ser una clases y no identificadores.
__________________
(:
  #7 (permalink)  
Antiguo 25/06/2014, 07:07
 
Fecha de Ingreso: septiembre-2011
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Problema con nth-child

Cita:
Iniciado por pzin Ver Mensaje
Pues ya que quieres afectar al hijo de cada segundo elemento #caja*, ese :nth-child se lo tendrás que colocar a este último:

Código CSS:
Ver original
  1. #caja:nth-child(even) #texto {}

* Insisto que debería de ser una clases y no identificadores.
SOLUCIONADO!!!!!!!!!!!!!!!!!!!

Muchas gracias!!!!!!

Lo que habia probado era esto... #caja #texto:nth-child(even) {}... Osea lo que me has puesto tú pero lo habia puesto al revés...

Buah menos mal que me has ayudado... Así ya me funciona, pero lo pondre con CLASS como me recomiendas...

Gracias!!!!!!!! No sabes el problemon que me has quitado de encima, que aqui he puesto un ejemplo, pero la web es enorme y sino conseguida hacer eso se rompia toda el diseño de la web...

Gracias de nuevo...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:12.