I am more of an admin than a developer but I managed to get the SPFx Modern script editor to work in my tenant to facilitate some required cosmetic changes. Unfortunately it seems that the CSS classes and ids are being appended with a suffix that changes on each browser refresh.

What CSS trickery do I need use in the SPFX Modern script editor to select .content instead of .content-150 or ButtonCard root instead of ButtonCard root-151? In either example, if I create some css related to a class (or id) with these appended numbers it will break the next time I load the page because the number appended to the element changes.

Thanks for any help!

  • I do this all the time with my CEWPs. What you need is called attribute selector: [class*="content-"]. It only selects classes with that specific part of the naming convention. But it is going to select ALL classes with this naming convention, so you really want to drill down. w3schools.com/css/css_attribute_selectors.asp Commented Jan 21, 2020 at 21:11

1 Answer 1


The following example for your reference.

CSS style:

<style type="text/css">
    background-color: green !important;
div[class^='ButtonCard root-']{
    background-color: green !important;

jQuery code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $("div[class^='ButtonCard root-']").css("color","red");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.