CSS Pseudo-classes with inline styles

by

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.

More Related Contents:

  1. Why doesn’t nth-of-type/nth-child work on nested elements?
  2. CSS :selected pseudo class similar to :checked, but for elements
  3. CSS selector by inline style attribute
  4. Using CSS :before and :after pseudo-elements with inline CSS?
  5. How to write a:hover in inline CSS?
  6. Why do browsers match CSS selectors from right to left?
  7. How can I style even and odd elements?
  8. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  9. Several elements with the same ID responding to one CSS ID selector
  10. Is there a CSS selector for the first direct child only?
  11. How to target a specific column or row in CSS Grid Layout?
  12. :last-child not working as expected?
  13. Difference in applying CSS to html, body, and the universal selector *?
  14. A CSS selector to get last visible div
  15. :not(:empty) CSS selector is not working?
  16. How to exclude particular class name in CSS selector?
  17. heading with horizontal line on either side [duplicate]
  18. CSS select elements with partial id
  19. Can a dynamic class be styled using CSS? [duplicate]
  20. Select first occurring element after another element
  21. CSS selector for empty or whitespace
  22. Default :target with CSS
  23. Is it possible to use CSS vars in CSS3 selectors?
  24. Select second last element with css
  25. How do I give a CSS class priority over an id?
  26. How to run the CSS3 animation to the end if the selector is not matching anymore?
  27. Is there a css selector for selecting an element futherup in the html?
  28. How can I target a specific column or row in a CSS grid layout?
  29. How to select classes with spaces
  30. CSS nth-match doesn’t work

Leave a Comment