CSS Pseudo-classes with inline styles
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.
React pseudo selector inline styling
My advice to anyone wanting to do inline styling with React is to use Radium as well.
It supports :hover
, :focus
and :active
pseudo-selectors with minimal effort on your part
import Radium from 'radium'
const style = {
color: '#000000',
':hover': {
color: '#ffffff'
}
};
const MyComponent = () => {
return (
<section style={style}>
</section>
);
};
const MyStyledComponent = Radium(MyComponent);
Update 04/03/2018
This has been getting a few upvotes lately so I feel like I should update it as I've stopped using Radium. I'm not saying Radium isn't still good and great for doing psuedo selectors, just that it's not the only option.
There has been a large number of css-in-js libraries since Radium came out which are worth considering. My current pick of the bunch is emotion, but I encourage you to try a few out and find the one that fits you best.
- emotion - The Next Generation of CSS-in-JS
- fela - Universal, Dynamic & High-Performance Styling in JavaScript
- styled-jss - Styled Components on top of JSS
- react-jss - JSS integration for React
- jss - JSS is a CSS authoring tool which uses JavaScript as a host language
- rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
- styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
- aphrodite - It's inline styles, but they work! Also supports styling via CSS
- csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
- styled-jsx - Full CSS support for JSX without compromises
- glam - crazy good css in your js
- glamor - css in your javascript
- glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
- styletron - ⚡️ Universal, high-performance JavaScript styles
- radium - Set of tools to manage inline styles on React elements.
- aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
- j2c - CSS in JS library, tiny yet featureful
(Source)
Inline CSS Pseudo-classes
As a matter of fact, the same document was referenced in another question here. This is what I had to say about it:
That document you link to is a 10-year-old draft.
It's 11 years old now, but that's not the point (although it does suggest a very likely reason why the example you give doesn't work). The point is that the example given does not appear in the latest revision of the same specification. So, supposedly, embedding selectors in style attributes was deemed not viable and dropped as a result.
My answer to the question linked in the comments suggests why such a feature was deemed not viable — it's simply not compatible with the current state of CSS as a 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.
Of course, I don't claim to speak for the people who actually made the decisions and/or wrote the spec, but if I were one of them, that's the reason I would have given for not supporting the feature.
That would also explain why no browser has implemented such a feature (or, more likely, the lack of implementation was among the factors causing it to be reconsidered and then ultimately dropped, giving vendors even more of a reason not to start implementing it now that the spec has reached CR status).
The lesson here is to never cite old revisions of W3C technical documents as canon. Always remember to review the latest specification; you should be able to find a link in the header of the document.
Is it possible to create inline pseudo styles?
Unfortunately no, you can't implement hover effects using inline CSS.
A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:
<style type="text/css">
.custom-class { background-color:green; }
.custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>
If you could force your users to drop a "style control" at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).
Unfortunately there's no elegant solution to this problem.
CSS Pseudo-classes with inline styles in react.js
In HTML & CSS
.testAfter::after { content: "->" }
<div class="testAfter">Something</div>
CSS pseudo-element in inline attribute style
It’s not possible. The working draft you are referring to is over 12 years old. Click on the link “Latest version” in it, and you’ll find the CSS Style Attributes, a W3C Recommendation (“W3C standard”). It was approved recently. It contains no changes to the style
attribute as in HTML specs, and this is indeed the message: the attribute has not been enhanced, and there are no plans to do so.
The conclusions depend on why you would use the construct. Normally, just assign an id
attribute to the element and use an id
selector in CSS.
Defining a link's pseudo-class style with inline CSS
- No, you can't.
- Please, if it is possible, refrain from inline styles. They are bad practice.
If you really need to do this inline without stylesheets, you can solve this with javascript:
<a onmouseover="window.oldlinkcolor=this.style.color;this.style.color='#ffffff';" onmouseout="this.style.color=window.oldlinkcolor;">...</a>
Though, using onmouseover and onmouseout statically like that is also bad practice, but it will solve your issue cross browser.
Styling CSS pseudoclasses in React
react's inline styles don't support css pseudo-classes. Or media queries. You could either write plain css, or use a lib for that https://github.com/styled-components/styled-components
Related Topics
Regex Select All Text Between Tags
Embed Pdf on a Webpage and Prevent Download
Multiple Select Dropdown Not Working With Ng-Option
Print Header/Footer on All Pages (Print Mode)
How to Disable Hover Effect for Active Link
How to Disable an Input Dynamically With Angular 7
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
Maxlength Ignored for Input Type="Number" in Chrome
How to Use Two Ngfor in HTML Angular 4
How to Add HTML Line Break Within an Input Text Placeholder
Having Difficulty Understanding How to Remove Some Padding
How to Customize the Validation of Input Type File Image
Where Is the Extra Space Coming from Around This Textarea
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Divide Div Color With 30% Different Color and 70% Different Color in Vertical Using CSS