Duda sobre "class" en css.
¡Hola!
Tengo una pequeña duda, espero explicarme bien...
resulta que estoy intentando aprender css de manera autodidacta, llevo un tiempecito dandole vueltas, y me ha surgido una duda... es la siguiente;
Siguiendo un tutorial que hay por internet, me construye unas clases (class) de esta manera.
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:FOCUS, A.enlacenav:LINK
{
color: #494E6B;
}
"a" representa al "anchor" o enlace, ok,
".enlacenav" es una clase, ok,
pero si digo "A.enlacenav:VISITED, A.enlacenav:FOCUS, A.enlacenav:LINK" ¿esta bien de esta manera? ¿por que se repite tanto?
Por que a mi se me ocurre hacerlo de esta otra...
A.enlacenav visited focus link {
color: #494E6B;
}
¿es correcto de mi manera, que diferencia hay? ¿y si no lo es, por que?
Espero vuestra ayuda y haberme expresado con claridad, muchas gracias.
Raimon
Hola,
Complementando las aportaciones de xavi (te me has avanzado y con mejor explicación!),
a tu pregunta de por qué se repite tanto: por que tú quieres (de buen rollo :-)) No es obligatorio que un selector (es decir, la parte previa a la propiedad css) conste de la especificación de todas las posibles pseudoclases de un elemento. Por ejemplo, te puede interesar que pase lo siguiente:
a:link {color: #ffffff:}
a:hover {color: #ff0000;}
De esta forma, el texto del elemento a se verá en principio blanco, pero cuando pases con el cursor por encima, se verá rojo. Lo mismo se podría aplicar a cuando el link se ha visitado, o cuando tiene el foco.
Puedes leer un tutorial muy bueno de css, en catalán y en inglés, donde todos esos aspectos fundamentales del css están explicados a la perfección. http://www.dense13.com/wec/curscss/
Otra cosa. En un css válido, los elementos y las propiedades van siempre en minúscula, según tengo entendido. Es una cuestión más formal que otra cosa porque en mayúscula funciona igual, también según mi experiencia y lo que sé. Puedes usar mayúsculas tanto como quieras en las clases y los id que crees para los elementos.
En fin, bienvenido al css! Verás que aunque lo básico se aprende rápido, no dejarás de aprender cosas en mucho tiempo. Yo por lo menos aún estoy en ello, y ahora que se nos viene HTML5 encima, pues bueno, aún queda más por aprender :)
Saludos,
Raimon
Mophics
Vale ya esta todo resuelto, visto y comprendido.
¡Muchas gracias!
xavib
Estás usando pseudo clases. La idea de las pseudo clases es que puedas definir el aspecto de ciertos elementos en función del estado de esos elementos.
Esto:
A.enlacenav visited focus link {
color: #494E6B;
}
no es incorrecto pero no funciona como esperas. Según tu sintaxis, te estás refiriendo a selectores de primer nivel tras el anchor. Cambiaría el color en una estructura HTML así:
<a class="enlacenav">
<visited>
<focus>
<link>Bla bla</link>
</focus>
</visited>
</a>
pero no del anchor, sino del contenido de <link>.
Aquí un poco más sobre selectores, pseudo clases y pseudo elementos (en caso de duda, acude a la w3c)