How to style nested <sup> element?

Question

I have an html element in my angular app that looks like

<p class="headline" [innerHTML]="content.headline"></p>

And content.headline is "<sup>$</sup>425MM". I want to apply specific styling to the sup element.

In my css file, I have tried:

.headline sup {
    color: red !important;
}

sup {
    color: red !important;
}

.headline > sup {
    color: red !important;
}

p sup {
    color: red !important;
}

p > sup {
    color: red !important;
}

None of these work. What am I doing wrong? How can I achieve this styling?

Answer 1

Based on this so post shared by Nicholas K, I got an answer

::ng-deep sup {
    color: red !important;
}