Pseudo-classes CSS com estilos embutidos


131

É possível ter pseudo-classes usando estilos embutidos?


Exemplo:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Eu sei que o HTML acima não funcionará, mas há algo semelhante que funcionará?

PS: Eu sei que devo usar uma folha de estilos externa, e uso. Eu estava curioso para saber se isso poderia ser feito usando estilos embutidos.


Respostas:


114

Não, isso não é possível. Nos documentos que usam CSS, um styleatributo embutido pode conter apenas declarações de propriedade; o mesmo conjunto de instruções que aparece em cada conjunto de regras em uma folha de estilo. Na especificação Atributos de estilo :

O valor do atributo style deve corresponder à sintaxe do conteúdo de um bloco de declaração CSS (excluindo as chaves delimitadoras), cuja gramática formal é fornecida abaixo nos termos e convenções da gramática central do CSS :

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

Não são permitidos seletores (incluindo pseudo-elementos), regras ou qualquer outra construção CSS.

Pense nos estilos embutidos como os aplicados a algum seletor de ID superespecífico anônimo: esses estilos se aplicam apenas àquele elemento com o styleatributo (Eles também têm precedência sobre um seletor de ID em uma folha de estilo, se esse elemento tiver esse ID.) Tecnicamente, ele não funciona assim; isso é apenas para ajudá-lo a entender por que o atributo não suporta estilos de pseudo-classe ou pseudo-elemento (ele tem mais a ver com como pseudo-classes e pseudo-elementos fornecem abstrações da árvore de documentos que não podem ser expressas em o idioma do documento).

Observe que os estilos embutidos participam da mesma cascata que os seletores nos conjuntos de regras e têm maior precedência na cascata (!important não obstante). Portanto, eles têm precedência mesmo sobre os estados da pseudo-classe. Permitir pseudo-classes ou quaisquer outros seletores em estilos embutidos possivelmente introduziria um novo nível em cascata e, com ele, um novo conjunto de complicações.

Observe também que revisões muito antigas das especificações de Atributos de estilo propuseram originalmente permitir isso , no entanto, elas foram descartadas, provavelmente pelo motivo acima, ou porque a implementação não era uma opção viável.


45

Não CSS, mas inline:

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

Veja exemplo →


2
Sim, acho que é outra opção. Não é CSS, mas funciona para: pairar usando mouseover e mouseout,: focus usando onfocus e onblur e: active usando onclick.
Web_Designer 14/03

1
Isso contaria como javascript? Eu tenho um projeto que requer CSS embutido e sem Javascript.
Aakil Fernandes 19/03/2013

7
Sim, isso é javascript.
Joel Murphy

1
Esta é uma boa opção. O uso de uma folha CSS externa é contra o princípio OO (orientado a objetos). O estilo de um elemento deve ser colocado junto com o elemento.
Evan Hu

1
Outro ponto para estilos embutidos é reduzir o tempo de renderização usando um DOM virtual. Um CSS precisará digitalizar o documento inteiro para alterações e aplicar seus estilos. Isso é eliminado pelos estilos embutidos.
Frederik Krautwald

26

Em vez de precisar de inline, você poderia usar CSS interno

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Você pode ter:

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

1
É aceitável usar css interno fora do elemento principal?
Thaina #

4
@Thaina Está agora, em HTML5: html5doctor.com/the-scoped-attribute
Ason

2
@ Thaina Funny, me deparei com outra questão em que decidi fazer isso e descobri que o scopedatributo foi removido das especificações .... developer.mozilla.org/en/docs/Web/HTML/Element/style
Ason

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.