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 replacingh1.blue
. Replacingh1.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.