Desactivar cambios de estylo de una "class"

[Sam_Enfot]

Hola de nuevo, no sabía que titulo proponer para esta duda.

///// Intentaré exponer //////

Imaginad cierto estyle para cierto elemento, como puede ser...

Código:

#menu li{
	margin-top:3px;
	margin-left:1em;
	list-style-image:url(menu_a.gif);
	list-style-position:inside;
	cursor:pointer;
	text-align:left;
	font-size:1.4em;
	color: #FFFFFF;
}

#menu li:hover{ 
list-style-image:url(menu_b.gif); 
color:#006600; text-decoration:underline;
}

#menu li.final {
list-style-type:none;
list-style-image:none;
cursor:default;
text-align:right;
font-size:0.2em;
color:#000000;

#menu li.final:hover {list-style-image:none; text-decoration:none..... }

///// Pregunto /////


Como podreis ver, declaro en #menu li.final unos atributos diferentes que #menu li. Creo una clase de esta manera.

Y, luego, al declarar los cambios para :hover resulta que tengo que volver a decirle que no quiero ninguna imagen de list-style. que tampoco quiero ningun text-decoration... etc.

El bombardeo de preguntas son: (hehehe)

- Como evito tener que volver a declarar todo lo que no quiero que haga on:hover?

- Lo que hace el programa exactamente, es un doble cambio? es decir, primero aplica los cambios declaradon en #menu li y luego aplica los cambios declarado en #menu li.final ? es decir, consume energía innecesaria ?

- Hay alguna manera de decirle por ejemplo....

....#menu li.final:hover { none; color:red; }

de manera que on:hover no haga nada, excepto cambiar el color a rojo


//// despido ////

Gracias, Sam_Enfot.

[kseso?]

Trabajos a realizar (investigación):
Herencia en css (y ya de paso) cascada

Como evito tener que volver a declarar todo lo que no quiero que haga on:hover?

Hay dos tipos de propiedades (y sus valores): los que se heredan y los que no.
Para los primeros, si quieres anularlos/modificarlos tienes que declararlos de nuevo con valor distinto.
Para los segundos, si no los declaras explícitamente no se aplican.

Lo que hace el programa exactamente, es...

El navegador va leyendo el html según lo encuentra escrito, así que primero "carga el css" que se encuentra en el head y a medida que se encuentra en el body un elemento le aplica las propiedades que le corresponden por su clase (identificador).

Hay alguna manera de decirle por ejemplo....

....#menu li.final:hover { none; color:red; }...

1º: en css las declaraciones son: elemento {"propiedad: valor;"} No puedes poner sólamente un valor (none) sin aplicarlo a una propiedad determinada que admita tal valor.
la pseudoclase :hover hereda las propiedades del elemento al que se la aplicas, así que si quieres modificar alguna propiedad en concreto tienes que definirla con su valor modificado explícitamente.

[Sam_Enfot]

Hola Kseso.

He estado leyendo y tratando de entender el concepto de herencia que me comentas.

Creo que comprendo lo que me dices, es cuestión de herencia. Entonces hay algo que no declaro correctamente para lograr lo que quiero (de la forma mas facil i con el codigo mas brebe posible)

Entonces...

La solucion esta en volver a declarar todas las propiedades de #menu li.final:hover para que no actúen las de #menu li:hover ¿no?

Me refiero que és la unica solucion, o no? debe de haber mas soluciones... verdad?

Que tal me funcionaría si declaro 2 pseudoclases del tipo:

#menu li.final
#menu li.normal <- Esta pseudoclase susbtituiría #menu li. Y tengo el problema solucioado tambien no?

Entonces no tendría problemas de herencia, no?

por que menu li.final i menu li.normal respeto a menu li final:hover i menu li.normal:hover no pueden cruzarse las propiedades, ¿ o voy errado ?

En todo caso solo heredarian las propiedades declaradas en #menu, pero en este caso en #menu solo hay propiedades del contenedor en sí, y no de los elementos continentes.

Ok, a partir de aquí de momento tengo entendido lo que buscaba. Y con estas 2 posibles soluciones que, a no ser que me digáis lo contrario, daré por "verdaderas".

Aún asi, me gustaría aclarar un ultimo tema,

Cito:

....#menu li.final:hover { none; color:red; }...

Correcto, lo del "none" no puede ser de ninguna manera, planteo la pregunta de otra manera, que tal si....

Código:

<br/>
#menu li { prop1:red; prop2:hola; prop3:hidden; transmitir_propiedades_por_herencia: none }
<br/>

Esto es posible? o simplemente no es necesario y ya está, y no le debo dar mas vueltas? jejej

gracias.

[kseso?]

A ver, por partes.
#menu li.final singinica que sólo se aplicaran las propiedades a un li que esté dentro de #menu y que tenga declarada la clase .final
En el siguiente ejemplo, sólo se aplican al segundo <li>

Código html:

<div id="menu">
<ul>
<li> este no las toma, porque su clase no es ".final"</li>
<li class="final"> A este elemento aplicas las propiedades</li>
</ul>
</div>
 

Por lo tanto, sólo ese último elemento tomará las propiedades declaradas en "#menu li.final:hover" cuando pongas el ratón encima.

Pero antes de intentar aclararte todo, pues mezclas varios conceptos (selectores y distintas formas de aplicarlos, pseudoelementos...) me vas a permitirme la osadía de recomendarte www.librosweb.es Ahí encontrarás 2 pdfs sobre CSS. Uno es una introducción y otro es "avanzado". Lógicamente, comienza por la introducción

Sobre tu última cuestión.
Si tenemos un elemento (un enlacepor ejemplo) con las siguientes propiedades:

Código css:

a {
background-color: #cdcdcd;
 font-size: 1em;
text-decoratión: none;
color: #444;
}
 

La única manera de que esas propiedades se anulen o cambien al poner el puntero encima es declararlas exprésamente para a:hover. Y no hay forma de decirle globlálmente que "none" a todo

Un saludo

[Sam_Enfot]

Hola de nuevo,

gracias por estas aclaraciones i por el link, me dedicaré a ello.

un saludo Kseso? !