R – sIFR header class color not changing

sifr

I have two h1 classes – one needs to be green and one needs to be blue. In sifr-config I have it set like this:

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

and in my code I have the h1 set like this:

<h1 class="blue">The Need</h1>

however, the color isn't changing. Does anyone know how to fix this? Thanks!

Best Answer

Replacing h1 already takes care of replacing h1.blue. Replacing h1.blue first will let you define different styling.

You could also wrap the text inside the <h1> in a <span class="blue"> and then use .blue as a selector to give the text a blue color.