Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security

CSS Hacks for Different Versions of Firefox

[ Firefox ] In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.

Some of these CSS hacks don’t validate, others are proprietary, and some are completely valid (depending on CSS specification). I have tested these hacks to the best of my ability, but don’t let that stop you from checking things out on your own (in fact, I absolutely recommend doing so). These Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article:

  • For each hack, change only #selector, .selector, and of course the declaration blocks.
  • Hacks that do not validate as CSS are designated with [!] in the associated comment.
  • If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
  • This post is a work in progress. Please share any Firefox hacks that are not on the list.

Also keep in mind that, in general, there are two types of CSS hacks: those that target and those that filter. By targeting, we are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others. Conversely, by filtering, we are referring to the application of CSS styles to every browser except a particular browser (or set of browsers). In essence, this hack dichotomy represents two sides of the same coin. How you classify these various hacks all depends on perspective.

CSS Hacks targeting all Firefox

These hacks target all versions of Firefox:

/* Target all Firefox */
#selector[id=selector] { color: red; }

/* Target all Firefox */ 
@-moz-document url-prefix() { .selector { color: red; } } 

/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }

CSS Hacks targeting Firefox 1.5 and newer

This hack targets Firefox versions 1.5 and newer:

/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }

CSS Hacks targeting Firefox 2 and older

These hacks target Firefox 2 and older:

/* Target Firefox 2 and older [!] */
body:empty .selector { color: red; }

/* Target Firefox 2 and older */
#selector[id=SELECTOR] { color: red; }

/* Target FireFox 2 and older [!] */
html>/**/body .selector, x:-moz-any-link { color: red; }

CSS Hacks targeting Firefox 3

This hack targets Firefox 3 (and possibly newer):

/* Target FireFox 3 [!] */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

Got more?

Please help by sharing any Firefox hacks that target or filter specific versions of Firefox. Bonus points for anyone with a hack for filtering all versions of Firefox (and only Firefox).

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
BBQ Pro: The fastest firewall to protect your WordPress.

33 responses to “CSS Hacks for Different Versions of Firefox”

  1. Avatar photo
    Thomas Scholz 2009/06/28 2:51 pm

    I use body:-moz-last-node .selector {} to address Gecko.

    Are some of your selectors targetting really Firefox only and not Gecko in general? Did you test with Thunderbird, SeaMonkey or K-Meleon?

  2. Please note: While the W3C validator will flag vendor extensions, such as -moz or -webkit, as errors, in reality “vendor extensions” are valid markup.

  3. Avatar photo
    Thomas Scholz 2009/06/28 4:18 pm

    @Rob Vendor extensions in css are neither markup nor valid. They’re just recommended informally.

  4. I think there is no need for FF2 (and older) hacks. FF users are smart enough to upadte to newest version. Just take a look at the stats ;)


  5. @Thomas

    CSS 2.1 docs Vendor specific extensions:

  6. Avatar photo
    Thomas Scholz 2009/06/29 5:49 am

    @Rob: This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

    Anyway, vendor-specific extensions will never be part of a W3C recommendation and should be treated as parsing errors by user agents. In practise they’re rather safe to use — safer than comment hacks or some *_+ voodoo at least.

  7. @Thomas,
    If you are going to hang your hat on thinking the CSS 2.1 documentation will be changing any time soon, I suggest you get a different job.

    Also, you you think “vendor-specific extensions will never be part of a W3C recommendation” I suggest you also look at the source I linked to which is just that.

  8. Avatar photo

    puf… i hate css hacks but i know without that not happing nothing…

  9. OmniWeb 5/Gecko 1.2(?): html*#id:not([lang*=""]) something {}

    Gecko 1.2(?) excluding OmniWeb 5 (invalid CSS): html:not([lang*=""])*#id something {}

    Gecko 1.0+: html:not([xmlns*=""]) something {}

    Gecko 1.0-1.8 (inclusive):

    html:not([xmlns*=""]) #id[id="ID"] something,
    html:not([xmlns*=""]) .class[class="CLASS"] something {}

    (the idea behind this hack is that those version of Gecko rendering engine treat classes and ids in case insensitive manner).

    Gecko 1.8+: html:not([xmlns*=""]):not(:only-child) something {}

    Gecko 1.9:

    html:not([xmlns*=""]) #id:not([id="ID"]) something,
    html:not([xmlns*=""]) .class:not([class="CLASS"]) something {}

    (see notice to 1.0-18)

    Hope this helps :-)

  10. Avatar photo
    Jeff Starr 2009/07/20 9:17 pm

    Indeed, you just doubled the scope of my article :)

    Looking forward to testing these juicy morsels. Lots of possibilities here.

    Thank you :)

  11. Avatar photo
    Jitendra vyas 2009/10/02 4:40 am

    Firefox 2 selectors not working properly it work on FF3 and 2 both

  12. Worked beautifully. Thank you, kind sir.

    Quite a pretty website you have here.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Daylight savings is a complete waste of time and needs to be eliminated.
Got a couple of snow days here in mid-March. Fortunately it's not sticking.
I handle all email in real time as it comes in, perpetually clear inbox for years now.
Added some nice features to Wutsearch search engine launchpad. Now 21 engines!
.wp TLD plz :)
Nice collection of free SEO APIs and user-agent lookups for Googlebot, Bingbot, Applebot, YandexBot, and more.
90% of online customer support is just explaining how to do basic troubleshooting.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.