Inline CSS Pseudo Classes

  • Author
  • #711646


    Has anyone been successful in adding INLINE Css pseudo classes (eg a:hover :before and :after)? Before I spend any time on this, does WP strip this kind of styling out or just ignore it? I realize not all browsers support, etc. etc.

    ( I’m also trying to do this without the CSS upgrade which is why I didn’t initially post this in the customization forum.)

    Thanks :)

    The blog I need help with is



    Using inline CSS can be problematic. This is because is on continuous roll-out and that means changes are being made to the underlying WordPress version code multiple times every day.

    So if one relies on inline CSS to achieve this, that, or the other workaround eventually what they rely on may POOF! disappear completely.

    As there are millions of us users the use of inline CSS is not encouraged for the foregoing reason, and because Staff would be flooded with complaints about the failure of inline CSS to operate – inline CSS that the Staff did not recommend using in the first place.

    [EDIT from Staff: We do make an effort to keep themes backward compatible as much as possible, and if changes do need to be made then we make an effort to help everyone with updates they need afterward. The theme team avoids making changes to established themes in general just for that reason—to avoid problems and try keep established blogs working well as much as possible. So please contact us if you have any trouble!]



    It is not possible the use of pseudo classes in inline CSS.



    I must’ve added that it is not possible at all in any website/blog.


    If I may (after devblog), a pseudo class is part of a selector. Inline CSS uses properties and values only, not selectors.

    And if I may, TT, the leap from inline CSS pseudo classes to inline CSS in general is a huge one. As I said to DS here, avoiding to use “this or that” because it might not work in the future is not a plausible argument.



    I must’ve added…

    That should’ve read “should’ve”… Guess I was already asleep when I typed that post…

    That is correct, Panos.



    Forget the Css and pseudo classes then, how about – onmouseover, onmouseout, onclick, onfocus and onblur? Do these work?
    Sorry, I’m so use to copy and pasting CSS and jquery/ javascript, that I’m finding myself having to go above my head and level of knowledge in much of this stuff…trying to figure a way to do accordion like tabs without the use of scripts.
    It’s like my GPS died and I’m trying to learn how to read a map again ;)

    TT, thanks for the warning about things going Poof! Even when following “standard operating procedures” it seems things can go “Poof!” at times!

    the use of inline CSS is not encouraged for the foregoing reason, and because Staff would be flooded with complaints about the failure of inline CSS to operate – inline CSS that the Staff did not recommend using in the first place.

    Which is why I asked on the forums ;) I think staff is pretty good about expressing that certain things aren’t supported by WordPress.

    Simply a , “Sorry, we don’t support that feature” would suffice? or “While we do not provide custom programming support, we’ve assembled the following guides as a reference to help you get started.”

    In fact, looking at the Custom CSS support page –
    it states,

    Making the best of this feature requires some experience with CSS and HTML, or at least a willingness to learn. See the CSS Help section further down this page for more information.
    If you’re looking for a WordPress-savvy web design firm, check out CodePoet, a directory of consultants who specialize in building beautiful and efficient WordPress sites.

    With all that said, I may end up getting the CSS upgrade. Just sucks to pay $30/yr for one feature that I may or may not decide to use. I’m on a slo-fi internet connection and the Css previews don’t work so well for me.

    Thanks for all the help you guys provide on not only on the forums but your blogs as well. I would of already given up I think if I wouldn’t of found them in the beginning.

    @panos – I wish you had a search box on every page of your website instead of just the homepage. I keep having to go back to it every time I need to look up something! ;)

    Holly :)



    nevermind the onmouseover, onclick….javascript duh back to square zero.


    @froggyphils, these things are HTML attributtes used to add JavaScript, they are not CSS: onmouseover, onmouseout, onclick, onfocus and onblur. And you cannot edit HTML on themes.

    jQuery and JavaScript are also not available for you to add at See

    About things going Poof, I don’t think that’s common! WordPress in general makes a strong effort to keep code backward compatible whenever possible, and that’s also true for the theme team’s efforts with regard to themes. Sometimes we make updates to theme code if we find bugs but we don’t make a lot of changes all the time to established themes for just the reason of keeping them working the best possible for users who have already set them up.

    I think adding inline CSS is fine if it’s really needed. But… Even though it’s OK to do, it’s not a best practice. It’s a best practice to separate style and function, which is what adding CSS to the CSS editor does, and so that’s probably preferable but inline CSS works too. Generally, inline CSS is avoided by the theme developers (which is separate from you using the Custom Design plugin), and I think that’s what TT is thinking of.

    So, if you want to be able to add attributes to HTML like onmouseover etc. and if you want to have full control of the code so you can add jQuery and other JavaScript, then is the best solution for you instead of See to learn about the differences.

    I hope this helps! If you have some specific examples or things you want to look into which are CSS related, then start a new thread with the specifics and I’d love to check it out and help you with it and make sure you’re setup with the right solution for you!


    @foggyphils: Thanks for the suggestion – done!

The topic ‘Inline CSS Pseudo Classes’ is closed to new replies.