0

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?

yalpsid eman
  • 3,064
  • 6
  • 45
  • 71
  • This looks wrong - `

    ` should that not be `

    [innerHTML]="content.headline"

    `?     – Paulie_D Sep 03 '21 at 17:34
  • see this answer for ref https://stackoverflow.com/questions/41979458/how-to-get-angular2-innerhtml-to-work – yalpsid eman Sep 03 '21 at 17:38
  • Why use innerHTML in the first place? – Nicholas K Sep 03 '21 at 17:42
  • 1
    [Might be useful](https://stackoverflow.com/questions/52969833/span-doesnt-apply-css-style-when-entered-via-innerhtml) along with [this](https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling). – Nicholas K Sep 03 '21 at 17:46

1 Answers1

0

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

::ng-deep sup {
    color: red !important;
}
yalpsid eman
  • 3,064
  • 6
  • 45
  • 71
  • Except it is deprecated, as stated in Angular docs : https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep. You could import global css or use ViewEncapsulation.None. – JulienD Sep 03 '21 at 20:28