Firefox CSS hack? - How to serve css to Firefox or IE only

Isolating a selector to standards compliant browsers

Mozilla Firefox is a relatively Web Standards' compliant browser, and so any attempts to isolate it, or many of the other browsers such as Opera or Safari can prove difficult. We can approach this as a method to write CSS selector definitions specific to Mozilla Firefox or Apple Safari.

There are a number of ways to get a given CSS selector to only affect the Firefox Web browser, and both of the below examples are based on using the short-comings and hacks meant for the other browsers to isolate the selector to Firefox.

1)
Write a general selector definition, and then use the common CSS hacks for Internet Explorer (IE5,IE6 and IE7) to exclude the hack-compliant browsers thereby isolating IE, and the other Web Standards compliant browsers.

Example:

body
{
font-family: "Trebuchet MS";
_font-family: Verdana; #font-family: arial;}

2)
Write a general rule that will apply to all browsers (Firefox included), and then write a second selector definition with higher specificity using CSS code that is not understood by IE and the other non-compliant browsers. Example:

ul li
{
list-style-type: none;
list-style-image: url(mybullets.gif);
}

ul>li
{
list-style-image: url(firefoxbullet.gif;);
}

By exploiting the fact that Firefox has implemented the child-of ul>li relationship, and the non standards compliant browsers have not, the second command only applies to Firefox. It goes without saying that my preferred and recommended method of isolating Firefox is the second approach. Unlike the first method which is using invalid CSS coding techniques, the second approach uses compliant CSS that will not cause any errors