Problem
Is it possible to use inline styles to create pseudo-classes?
Example:
<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>
I understand that the HTML above will not function, but is there something similar that will?
P.S. I know I should, and I do, utilize an external style sheet. I was just wondering whether this could be accomplished with inline styles.
Asked by Web_Designer
Solution #1
No, this isn’t going to work. An inline style attribute can only contain property declarations in documents that utilize CSS; the same set of statements that occur in each ruleset in a stylesheet. According to the Style Attributes specification:
Selectors (including pseudo-elements), at-rules, and any other CSS construct are not permitted.
Consider inline styles to be the styles applied to an anonymous super-specific ID selector: they only apply to the element with the style attribute. (If the element has that ID, they also take precedence over an ID selector in a stylesheet.) Technically, it doesn’t operate like way; this is only to explain why the attribute doesn’t allow pseudo-class or pseudo-element styles (it has to do with the way pseudo-classes and pseudo-elements give document tree abstractions that can’t be described in the document language).
Inline styles, like selectors in rule sets, are part of the same cascade and have the highest priority (!important notwithstanding). As a result, they have precedence over pseudo-class states. Allowing pseudo-classes or other selectors in inline styles could introduce a new cascade level, as well as new problems.
Note that earlier versions of the Style Attributes spec proposed permitting this, but it was dropped, possibly for the reasons stated above, or because implementation was not feasible.
Answered by BoltClock
Solution #2
It’s not CSS, but it’s inline:
<a href="#"
onmouseover = "this.style.textDecoration = 'none'"
onmouseout = "this.style.textDecoration = 'underline'">Hello</a>
See example →
Answered by mVChr
Solution #3
Internal CSS could be used instead of inline 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>
Answered by Jim Doodle
Solution #4
You might want to take a look at https://hacss.io:
<a href="http://www.google.com" class=":hover{text-decoration:none;}">Google</a>
Demo
Answered by Nick Saunders
Post is based on https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles