The BigText plugin does not work when the parent class is identified in css

advertisements

I've been using the following jquery plugin to set my font sizes based on the width of the container divs: http://www.zachleat.com/web/bigtext-makes-text-big/ I have been able to get it working with different fonts when I define the fonts in the css as

.bigtext{
    font-family:Arial
}

see http://jsfiddle.net/pF5bQ/3/

however, if I define the css with a parent class

.theme .bigtext{
    font-family:Arial
}

It sets the font too big.

see http://jsfiddle.net/pF5bQ/4/

The app I'm working on features various themes that use different fonts so I need to be able to define different styles for the bigtext based on the parent class.

Any ideas?


Not a 'true' solution but the work around I ended up discovering was that if I applied my theme class to the same div as the big text, I'd get the desired result.

.theme.bigtext{
    font-family:Arial
}

It feels really hack-y because in the project I'm working on, I need to do the class switching and what not in javascript, but it gets the job done.

http://jsfiddle.net/pF5bQ/7/