How do I use multiple selectors with sIFR?

Question

I have set up sIFR on a site and it is working correctly. However I need to be able to apply multiple styles based on class.

The functioning code is:

    sIFR.replace(myriadpro, {
  selector: 'h2',
  css: '.sIFR-root { font-size: 20px; color: #008cba; text-transform: capitalize; }',
  wmode: 'transparent'
});

However, I need to be able style h2.white with a different font color. I just need to know how to add another selector.

Thanks in advance for the help.

Answer 1

The (arguably) simplest way to do this is to make multiple calls to sIFR.replace. So, just call it again with the different selector and styling rules.

However, keep in mind that if you simply need to apply the same settings to just another set of elements, the selector key of the options object can contain a comma-delimited list of selectors, just like a regular CSS file.

Answer 2

Check out this page: http://www.teddy-o-ted.com/tutorials/implementing-sifr-3/