Short answer: you can’t. Long answer: you shouldn’t. Give it a class name or an id and use stylesheets to apply the style. :hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn’t any inline-style equivalent (as it isn’t defining the selection criteria). Response to the OP’s comments: See … Read more
First of all: If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and … Read more
Here’s a very simple (probably in much need of improvement) plugin I’ve thrown together that will get you the value of an inline style property (and return undefined if that property is not found): (function ($) { $.fn.inlineStyle = function (prop) { var styles = this.attr(“style”), value; styles && styles.split(“;”).forEach(function (e) { var style = … Read more
The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file. Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time … Read more
You can’t specify inline styles for pseudo-elements. This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can’t be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element. Since … Read more
The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector: div[style*=”display:block”] It is for this very reason however that it’s extremely fragile. As attribute selectors don’t support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you … Read more
There aren’t a lot of “Best Practices” yet. Those of us that are using inline-styles, for React components, are still very much experimenting. There are a number of approaches that vary wildly: React inline-style lib comparison chart All or nothing? What we refer to as “style” actually includes quite a few concepts: Layout — how … Read more
Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you’re using inline css for things like <div style =”font-size:larger; text-align:center; font-weight:bold”> on each page to denote a page header, it would be a lot easier to maintain as <div … Read more
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 … Read more
Short answer: you can’t. Long answer: you shouldn’t. Give it a class name or an id and use stylesheets to apply the style. :hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn’t any inline-style equivalent (as it isn’t defining the selection criteria). Response to the OP’s comments: See … Read more