Skip to main content
Yellow and black font-family was successfully modified, but red over-rules font-weight settings.

See above for reference. I can successfully edit the font-family for both “.title.ng-star-inserted” and “.subtitle.ng-star-inserted” but all attempts to edit the font-weight are being ignored.

Red is the “dynamic” CSS class and green shows my CSS edits, you can see my “font-weight: 300;” is being ignored.

 

The class in red (_ngcontent-wrv-c73) is apparently “over-ruling” the font-weight determination, however, it changes every time the page refreshes, specifically the middle 3 values (e.g. it will change from _ngcontent-wrv-c73 to _ngcontent-ilw-c73).

Do I need to use a different class selector? Or is there a way to target classes that are dynamic?

 

I might start by trying to increase specificity.

For example - looks like this is falling under the ID of  #doc-widget-59

If you added this to the style rule - you could see if it sticks.

It may be that a very common style here has equal or more specificity down the line that overrides.

For example - looks like this is falling under the ID of  #doc-widget-59

 

 

I would like to avoid this if I can, because then I would need to update and maintain formatting for each individual widget, rather than in-bulk.

Understood - This helps you to discover if, indeed, you are up against a specificity problem. I think that may be the case.

I went ahead and tested on my platform.

I can get a visible change with as little as

#doc-widget-237 .subtitle {

    font-weight: 900;

}

As soon as I drop the ID - I don’t see it. Hard to say how much additional specificity is needed.

Aha! Break-through - for those who run into the same issue as me, I was able to get it to work by adding more specificity by using “div.subtitle.ng-star-inserted.”

 

Thanks for the idea @gstager 

Glad to hear it!

Reply


Terms & ConditionsCookie settings