Herencia

[JoniJnm]

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!

[Nathan_1979]

Selector hijo y palante:

Código css:

div.activo > span { color:red; }
 

Saudos

[JoniJnm]

Oh, qué cosas existen :D

Gracias!

[kseso?]

Selectores avanzados.

Código css:

.activo span {color: 000;}
.activo > span {color: #fff}
 

Código html:

div class="activo">
    <span>Hola 1</span>
    <div>
        <span>Hola 2</span>
    </div>
</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:

.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

[jomaruro]

Hola:

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

Iniciado por JoniJnm

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.

[kseso?]

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

[Nathan_1979]

Iniciado por jomaruro

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

Ea, por ahora JoniJnm no se ha quejado

[JoniJnm]

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 ;)

[kseso?]

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

[Mikmoro]

Además de que, como dice jomaruro, eso no resuleve su "otro problema" que cita.

[JoniJnm]

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!

[kseso?]

¿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...

[JoniJnm]

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 :)

[jomaruro]

Hola:

Iniciado por Mikmoro

Además de que, como dice jomaruro, eso no resuleve su "otro problema" que cita.

Pero ya ves el caso que me hacen

Iniciado por Nathan_1979

Ea, por ahora JoniJnm no se ha quejado

Saludos.

[Mikmoro]

Iniciado por Nathan_1979

Ea, por ahora JoniJnm no se ha quejado

Adelante, Nathan_1979, a la pizarra, que ahora sí se ha quejado

[jomaruro]

Hola:

Iniciado por Mikmoro

Adelante, Nathan_1979, a la pizarra, que ahora sí se ha quejado

¡Por hablar!

Saludos.