[Fixed] Angular styles defined in component does not apply


In my project when I define this style in angular component

span.highlighted:first-of-type { background-color: pink; }

This does not apply on HTML. But when I define the above style in Global styles.css file it apply on the component. I am not sure what might be the reason. How can I solve this issue?


               <td [innerHTML]='dataToSave.replaceHTML' #term></td>


   checkAndReturnData(silk: PowerWin | undefined) {
   const atom = document.createElement('span');
   atom.innerHTML = this.updateHTML(silk.first_name, silk.last_name);
   this.totalOccurrences = atom.querySelectorAll('.highlighted').length;
   silk.replaceHTML = atom.innerHTML;
   this.dataToSave = silk;

updateHTML(value: any, last_name: any): string {
  const matcher = new RegExp(last_name, 'gi');
  const matches = Array.from(new Set(value.match(matcher)));
  if (!matches || matches.length === 0) return value;
  for (const match of matches) {
    value = value.replaceAll(match, `<span class = "highlighted data-${match}">${match}</span>`);
  return value;


Try to use ::ng-deep before your css selector.

It allows your style to be visible in the global scope, as the documentation describe it;

Leave a Reply

(*) Required, Your email will not be published