Foros del Web » Creando para Internet » CSS »

Herencia

Estas en el tema de Herencia en el foro de CSS en Foros del Web. Hola, Tengo este HTML: Código HTML: <div class= "activo" > <span> Hola 1 </span> <div> <span> Hola 2 </span> </div> </div> Sin poder modificar el ...
  #1 (permalink)  
Antiguo 14/10/2009, 08:36
Avatar de JoniJnm  
Fecha de Ingreso: mayo-2007
Ubicación: Madrid
Mensajes: 264
Antigüedad: 10 años, 7 meses
Puntos: 4
Pregunta Herencia

Hola,

Tengo este HTML:
Código HTML:
<div class="activo">
	<span>Hola 1</span>
	<div>
		<span>Hola 2</span>
	</div>
</div> 
Sin poder modificar el html, sólo con css, se puede hacer que el 1º span se cambie (de color por ejemplo) y que el 2º no lo herede?
Código:
div.activo span { color: red }
Con eso se ven los dos span en rojo.
Otro problema que hay es que no sé cuál de los dos div's tendrá la clase activo, es decir, que si lo tiene el 2º div, que el color rojo lo tenga el 2º span, y si activo lo tiene el 1º pues que sea rojo sólo el 1º span.
Es decir, algo como...
Código:
div.activo span { color: red !sin_heredar }
Hay algo para que se pueda hacer eso?

Saludos!
__________________
JoniJnm.es
  #2 (permalink)  
Antiguo 14/10/2009, 08:40
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Herencia

Selector hijo y palante:

Código css:
Ver original
  1. div.activo > span { color:red; }

Saudos

Última edición por Nathan_1979; 14/10/2009 a las 08:44 Razón: Oops! las prisas! xD
  #3 (permalink)  
Antiguo 14/10/2009, 08:42
Avatar de JoniJnm  
Fecha de Ingreso: mayo-2007
Ubicación: Madrid
Mensajes: 264
Antigüedad: 10 años, 7 meses
Puntos: 4
Respuesta: Herencia

Oh, qué cosas existen :D

Gracias!
__________________
JoniJnm.es
  #4 (permalink)  
Antiguo 14/10/2009, 08:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Herencia

Selectores avanzados.
Código css:
Ver original
  1. .activo span {color: 000;}
  2. .activo > span {color: #fff}
Código html:
Ver original
  1. div class="activo">
  2.     <span>Hola 1</span>
  3.     <div>
  4.         <span>Hola 2</span>
  5.     </div>
  6. </div>
"hola 1" se verá blanco y "hola 2" negro
o también puedes utilizar este otro selector para colorear el segundo span:
Código css:
Ver original
  1. .activo * span {color: #fff;}

Un saludo

Edito: me entretuve en otras cosas y mientras me comió la merienda Nathan
Pero al menos añadí algo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 14/10/2009, 15:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Herencia

Hola:

Pero tal y como dais la solución ¿Se cumple el requisito?

Cita:
Iniciado por JoniJnm Ver Mensaje
Otro problema que hay es que no sé cuál de los dos div's tendrá la clase activo, es decir, que si lo tiene el 2º div, que el color rojo lo tenga el 2º span, y si activo lo tiene el 1º pues que sea rojo sólo el 1º span.
Pienso que así serán siempre iguales, haría falta javascript o php ¿me equivoco?

Saludos.

  #6 (permalink)  
Antiguo 14/10/2009, 16:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Herencia

Yo al menos he partido del código html facilitado. Si es distinto y tiene dudas para aplicar cualquiera de las respuestas dadas, que publique el código correcto (real) y nos ceñimos a él.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 14/10/2009, 16:33
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Herencia

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:
Pero tal y como dais la solución ¿Se cumple el requisito?
Ea, por ahora JoniJnm no se ha quejado
  #8 (permalink)  
Antiguo 14/10/2009, 16:38
Avatar de JoniJnm  
Fecha de Ingreso: mayo-2007
Ubicación: Madrid
Mensajes: 264
Antigüedad: 10 años, 7 meses
Puntos: 4
Respuesta: Herencia

El código real es parecido a ese (es una lista que sale dentro de otra [menús en Joomla])

Con
Código:
div.activo > span { color:red; }
ha funcionado bien :)

Gracias a todos ;)
__________________
JoniJnm.es
  #9 (permalink)  
Antiguo 14/10/2009, 16:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Herencia

Perfecto, JoniJnm.
Pero tengo una mala noticia: ¿lo miraste en ie6?
El selector de hijos (>) así como el de adyacentes (+) no van en ie6.
Pon el código html exacto y di a qué elemento quieres aplicar qué propiedades y miramos si hay forma compatible con ese tan querido e incomprendido navegador

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 14/10/2009, 17:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Herencia

Además de que, como dice jomaruro, eso no resuleve su "otro problema" que cita.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 14/10/2009, 17:29
Avatar de JoniJnm  
Fecha de Ingreso: mayo-2007
Ubicación: Madrid
Mensajes: 264
Antigüedad: 10 años, 7 meses
Puntos: 4
Pregunta Respuesta: Herencia

El HTML es este:
Código HTML:
<!--  Menú seleccionado: galería-->

<div id="menu">
	<ul id="mainlevel-nav" class="menumainlevel-nav">
		<li class="item1">cosas</li>
		<li class="item2">cosas</li>
		<li class="itemx">cosas</li>


		<li class="parent active item6" id="current">
			<a href="/es/galeria.html">
				<span>Galería</span>
			</a>
			<ul>
				<li class="item7">
					<a href="/es/galeria/collage.html">
						<span>Collages</span>
					</a>
				</li>

				<li class="item8">Lienzos</li>
				<li class="item9">cosas</li>
				<li class="itemx">cosas</li>
			</ul>
		</li>
	</ul>
</div> 
Código HTML:
<!--  Menú seleccionado: collages-->
<div id="menu">
	<ul id="mainlevel-nav" class="menumainlevel-nav">
		<li class="item1">cosas</li>
		<li class="item2">cosas</li>
		<li class="itemx">cosas</li>


		<li class="parent active item6">
			<a href="/es/galeria.html">
				<span>Galería</span>
			</a>
			<ul>
				<li id="current" class="active item7">
					<a href="/es/galeria/collage.html">
						<span>Collages</span>
					</a>
				</li>

				<li class="item8">Lienzos</li>
				<li class="item9">cosas</li>
				<li class="itemx">cosas</li>
			</ul>
		</li>
	</ul>
</div> 
Es lo que genera Joomla para los menús (por eso no puedo modificar el HTML). La lista que hay dentro de otra es porque es un submenú del primero. Todos los <li> son lo mismo => <a><span>

Cuando seleccionas un menú en Joomla, se destaca el <li> con la id "current". También, se añade la clase "active" a ese <li> y a sus superiores (como sale en el 2º ejemplo)


Al final, lo que quiero es que si pasa el caso 1, se ponga en negro galerías, si pasa el paso 2, se ponga en negro los dos (osea el <li> y sus padres). Por eso tengo:
Código:
#menu li.active > a {
	font-weight: bold
}
Lo he probado en IE7, 8 y firefox 3.5. En los tres va bien, en IE6, no lo he probado (no lo tengo instalado), pero si decís que va mal... os creo ^^

PD: Lo probaré también en opera 10
PD: Para poner de qué tipo es un código (en el foro), cómo es? {code type=css}{/code} o cómo?

Saludos!
__________________
JoniJnm.es
  #12 (permalink)  
Antiguo 14/10/2009, 18:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Herencia

¿Conoces la pseudoclase :visited ?
No conozco el css de joomla, pero supongo que tendrás algo así como
#menu ul li#current a {...} para marcar las propiedades de la opción seleccionada (posiblemente sea más específico teniendo alguna que otra clase aplicada en ese selector)
Pues añade:
#menu ul li#current a, #menu ul li a:visited {...} (complementado con las clases oportunas)

Un saludo

P.D.: los códigos seleccionas y en el aviso emergente escribes el tipo de código que es: css, html, php...
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 15/10/2009, 08:14
Avatar de JoniJnm  
Fecha de Ingreso: mayo-2007
Ubicación: Madrid
Mensajes: 264
Antigüedad: 10 años, 7 meses
Puntos: 4
Respuesta: Herencia

Hola,

Con:

#menu ul li#current a, #menu ul li a:visited {color:red}

En el primer caso (seleccionado galería) se colorea también el segundo <li> (collages), realmente se colorean todos los <a> debajo del <li> con id=current (es decir, galería, collages, Lienzos, cosas, cosas...)

Bueno da igual, que no se vea bien en IE6 xD

Saludos y gracias :)
__________________
JoniJnm.es
  #14 (permalink)  
Antiguo 15/10/2009, 14:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Herencia

Hola:

Cita:
Iniciado por Mikmoro Ver Mensaje
Además de que, como dice jomaruro, eso no resuleve su "otro problema" que cita.
Pero ya ves el caso que me hacen

Cita:
Iniciado por Nathan_1979 Ver Mensaje
Ea, por ahora JoniJnm no se ha quejado
Saludos.

  #15 (permalink)  
Antiguo 15/10/2009, 17:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Herencia

Cita:
Iniciado por Nathan_1979 Ver Mensaje
Ea, por ahora JoniJnm no se ha quejado
Adelante, Nathan_1979, a la pizarra, que ahora sí se ha quejado
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 15/10/2009, 17:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Herencia

Hola:

Cita:
Iniciado por Mikmoro Ver Mensaje
Adelante, Nathan_1979, a la pizarra, que ahora sí se ha quejado
¡Por hablar!

Saludos.

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 01:28.