Pseudoclases CSS con estilos en línea
¿Es posible tener pseudoclases usando estilos en línea?
Ejemplo:
<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>
Sé que el HTML anterior no funcionará, pero ¿hay algo similar que funcione?
PD: Sé que debería usar una hoja de estilo externa y lo hago. Sólo tenía curiosidad por saber si esto se podría hacer usando estilos en línea.
No, esto no es posible. En documentos que utilizan CSS, un styleatributo en línea sólo puede contener declaraciones de propiedad; el mismo conjunto de declaraciones que aparece en cada conjunto de reglas en una hoja de estilo. De la especificación de atributos de estilo :
El valor del atributo de estilo debe coincidir con la sintaxis del contenido de un bloque de declaración CSS (excluyendo las llaves delimitadoras), cuya gramática formal se detalla a continuación en los términos y convenciones de la gramática central de CSS :
declaration-list : S* declaration? [ ';' S* declaration? ]* ;
No se permiten selectores (incluidos pseudoelementos), ni reglas at, ni ninguna otra construcción CSS.
Piense en los estilos en línea como los estilos aplicados a algún selector de ID anónimo súper específico: esos estilos solo se aplican a ese elemento con el styleatributo. (También tienen prioridad sobre un selector de ID en una hoja de estilo, si ese elemento tiene esa ID). Técnicamente, no funciona así; esto es solo para ayudarlo a comprender por qué el atributo no admite estilos de pseudoclase o pseudoelemento (tiene más que ver con cómo las pseudoclases y pseudoelementos proporcionan abstracciones del árbol del documento que no se pueden expresar en el idioma del documento).
Tenga en cuenta que los estilos en línea participan en la misma cascada que los selectores en los conjuntos de reglas y tienen la máxima prioridad en la cascada ( !importantno obstante). Por eso tienen prioridad incluso sobre los estados pseudoclasistas. Permitir pseudoclases o cualquier otro selector en estilos en línea posiblemente introduciría un nuevo nivel de cascada y con él un nuevo conjunto de complicaciones.
Tenga en cuenta también que revisiones muy antiguas de la especificación de Atributos de estilo proponían originalmente permitir esto , sin embargo, se descartó, presumiblemente por el motivo indicado anteriormente, o porque implementarlo no era una opción viable.
No CSS, pero en línea:
<a href="#"
onmouseover = "this.style.textDecoration = 'none'"
onmouseout = "this.style.textDecoration = 'underline'">Hello</a>
Ver ejemplo →
En lugar de necesitar en línea, puede usar CSS interno
<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>
Podrías tener:
<a href="http://www.google.com" id="gLink">Google</a>
<style>
#gLink:hover {
text-decoration: none;
}
</style>
