Is there anyway using CSS to change the color of individual link in QuickLinks web part in SharePoint Online Modern site?

By default the color is blue, however using CSS on this element you can change the color: .content_6c75a884

I was wondering if it's possible to somehow change the background color of each link based on the text of that tile.

For Ex: If the text of Tile1= Home then set background-color: #ffcc00 etc.

enter image description here

1 Answer 1


Deploy react-script-editor SPFx web part to your tenant, then, you could add CSS/JavaScript for this requirement.

For example:

 <style type="text/css">
    /*match by label, there is a blank*/
    a[aria-label="MSDN. "] {
        background-color: azure !important;

    a[aria-label="mylist3. "] {
        background-color: red !important;
    /*match outter div by order, you could find the data-list-index attribute by developer tool*/
    div[data-list-index="2"] {
        background-color: rosybrown !important;

enter image description here enter image description here

  • Lee this is brilliant. By any chance would you know how to add within that code a line to change the font color as well? Nov 8, 2019 at 6:31

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.