CSS Hacks for Different Versions of Firefox

CSS hacks targeting different versions of Firefox. Some of these CSS 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.

Types of CSS hacks

1. target -
We are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others.

2. filtering
We are referring to the application of CSS styles to every browser except a particular browser (or set of browsers).

CSS Hacks targeting all 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

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

CSS Hacks targeting 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

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