BigText Plugin not working when parent class is identified in css

Question

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?

Answer 1

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/

Answer 2

well you can try this hack I did lol

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

.bigtext{
    font-family:arial
}

.theme .bigtext{
    font-family:arial;
    color:red;
}

edit: so if you put the .theme line inside of your theme css or whatever way you implement it, I think it will work as long as you have the original line lol This is all I can offer, I never used bigtext before