CSS Pseudo-classes with inline styles

Question

Is it possible to have pseudo-classes using inline styles?

---

Example:

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

I know the above HTML won't work but is there something similar that will?

P.S. I know I should use an external style sheet, and I do. I was just curious if this could be done using inline styles.

Kneehole

possible duplicate of Is is possible to create inline pseudo styles? – Timetable

Answer 1

No, this is not possible. In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the Style Attributes spec:

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:

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

Neither selectors (including pseudo-elements), nor at-rules, nor any other CSS construct are allowed.

Think of inline styles as the styles applied to some anonymous super-specific ID selector: those styles only apply to that one very element with the style attribute. (They take precedence over an ID selector in a stylesheet too, if that element has that ID.) Technically it doesn't work like that; this is just to help you understand why the attribute doesn't support pseudo-class or pseudo-element styles (it has more to do with how pseudo-classes and pseudo-elements provide abstractions of the document tree that can't be expressed in the document language).

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.

Note also that very old revisions of the Style Attributes spec did originally propose allowing this, however it was scrapped, presumably for the reason given above, or because implementing it was not a viable option.

Ymir

Answer 2

Not CSS, but inline:

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

See example →

Haugh

Yeah, I guess that is another option. It's not CSS but it works for :hover using mouseover and mouseout, :focus using onfocus and onblur, and :active using onclick. – Kneehole

Would this count as javascript? I have a project that requires inline CSS and no Javascript. – Triphammer

Yes this is javascript. – Zuber

This is a good option. Using an external CSS sheet is against OO(object oriented) principle. An element's style should be put together with the element. – Mink

@Evan using an external CSS sheet has become an accepted best practice. Encapsulation and decoupling are synergistic goals; it's all about finding the right orthoganal to separate concerns along. – Hepcat

hi @Ryan, you are right. But the thing is when given a html element, I can't make sure its style because it can be affected by styles defined in other files. – Mink

Another point for inline styles is lowering render times by using a virtual DOM. A CSS will need to scan the entire document for changes and applying its styles. This is eliminated by inline styles. – Enterpriser

@Evan胡孝义 what if I want this same appearance on several elements. Then the DRY principle of OO suggests extracting it out.... external style sheets! Separating style from structure is not inconsistent with OO. – Height

@LesNightingill Yes, this is a good case where we should apply external style sheets but not good when we wanna be portable. For example, move one element or widget from one project to another and keep the style, we then need to take careful care of all the 'external' styles scattered in other files. – Mink

this just gave me the motivation to write another answer: "Not inline but with CSS" – Hartley

Answer 3

Rather than needing inline you could use Internal CSS

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

You could have:

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

Pillar

Is it acceptable to use internal css outside head element? – Zug

@Thaina It is now, in HTML5: html5doctor.com/the-scoped-attribute – Batchelder

@Thaina Funny, ran into another question where I decided to do such a thing and found out the scoped attribute has been removed from the specs....developer.mozilla.org/en/docs/Web/HTML/Element/style – Batchelder

Answer 4

You could try https://hacss.io:

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

Demo

Copenhagen