Pseudo-clases CSS con estilos en línea


131

¿Es posible tener pseudo-clases 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 lo haga?

PD: Sé que debería usar una hoja de estilo externa, y lo hago. Tenía curiosidad por saber si esto podría hacerse usando estilos en línea.


Respuestas:


114

No, esto no es posible. En los documentos que utilizan CSS, un styleatributo en línea solo puede contener declaraciones de propiedades; 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 los corchetes delimitadores), cuya gramática formal se proporciona a continuación en los términos y convenciones de la gramática central CSS :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Ni los selectores (incluidos los pseudoelementos), ni las reglas, ni ninguna otra construcción CSS están permitidos.

Piense en los estilos en línea como los estilos aplicados a un selector de ID súper específico anónimo: esos estilos solo se aplican a ese mismo 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 pseudo-clase o pseudo-elemento (tiene más que ver con cómo las pseudo-clases y los pseudo-elementos proporcionan abstracciones del árbol de documentos 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 mayor prioridad en la cascada ( !importantno obstante). Por lo tanto, tienen prioridad incluso sobre los estados de pseudo-clase. Permitir pseudo-clases o cualquier otro selector en estilos en línea posiblemente introduciría un nuevo nivel en cascada, y con ello un nuevo conjunto de complicaciones.

Tenga en cuenta también que las revisiones muy antiguas de la especificación de atributos de estilo originalmente propusieron permitir esto , sin embargo, se descartó, presumiblemente por la razón mencionada anteriormente, o porque implementarla no era una opción viable.


45

No CSS, sino en línea:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

Ver ejemplo →


2
Sí, supongo que esa es otra opción. No es CSS, pero funciona para: desplazarse usando mouseover y mouseout, enfocar usando onfocus y onblur y: activo usando onclick.
Web_Designer

1
¿Contaría esto como javascript? Tengo un proyecto que requiere CSS en línea y no Javascript.
Aakil Fernandes

77
Sí, esto es javascript.
Joel Murphy

1
Esta es una buena opción El uso de una hoja CSS externa va en contra del principio OO (orientado a objetos). El estilo de un elemento se debe juntar con el elemento.
Evan Hu

1
Otro punto para los estilos en línea es reducir los tiempos de renderizado mediante el uso de un DOM virtual. Un CSS necesitará escanear todo el documento en busca de cambios y aplicar sus estilos. Esto es eliminado por los estilos en línea.
Frederik Krautwald

26

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>

1
¿Es aceptable usar css interno fuera del elemento head?
Thaina

44
@Thaina Ahora es, en HTML5: html5doctor.com/the-scoped-attribute
Ason

2
@Thaina Funny, me encontré con otra pregunta en la que decidí hacer tal cosa y descubrí que el scopedatributo se ha eliminado de las especificaciones ... developer.mozilla.org/en/docs/Web/HTML/Element/style
Ason

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.