ExtJs 4 Firefox css conditional

Question

I need to give particular style in css just for Firefox in ExtJs 4.2 Looking in the web I found that Extjs give a particular class when you are in certain browser so I tried:

 .x-body.x-gecko .x-btn-action-nav-large.x-btn-inner {
     font-size: 5em;
}

or even

.x-body.x-gecko {
    .x-btn-action-nav-large.x-btn-inner {
         font-size: 5em;
    }
}

But nothing work and is showed in Firefox any suggestion?

Answer 1

Try:

.x-body.x-gecko .x-btn-action-nav-large .x-btn-inner {
     font-size: 5em;
}

You need a space between the last 2 rules as the inner element is a child of the button.

You could also simply do:

.x-gecko .x-btn-action-nav-large .x-btn-inner {
     font-size: 5em;
}