style auto generated html attributes with regex

Question

I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:

<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)

Is there a way to use regex to target the custom tag attribute?

This didn't work:

tag[^=_ngcontent-] {
  color: red !important;
}

Nor did just targetting the tag app e.g.:

tag {
  color: red !important;
}

@rootkonda no - I think I need to approach this in a different way. Thanks for the regex above though, it was correct in itself, just not for this problem — Leon Segal, Aug 04 '20 at 12:10

score 0 · Accepted Answer · answered Aug 04 '20 at 12:33

According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.

If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.

This angular-blog article recently helped me understand the idea behind the style ecapsulation.

score 0 · Answer 2 · answered Aug 04 '20 at 12:35

0

Unfortunately, there is no wildcarding support in CSS for attribute names.

If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).

style auto generated html attributes with regex

2 Answers2