How to override the style the anchor of an "Icon List" button using the Custom CSS option

How To
1

Hi all. I’ve added a Facebook button, and the text is red, which is my standard anchor colour.

Screenshot 2022-10-22 at 18.21.18
Screenshot 2022-10-22 at 18.21.18835×102 14.7 KB

I would like to just override this button to a white link, so I’ve tried this:

root a:link, a:visited, a:hover, a:active { color: #ffffff}

However, this makes the footer nav white too:

Screenshot 2022-10-22 at 18.26.41
Screenshot 2022-10-22 at 18.26.41835×102 14.2 KB

I can’t seem to target just the Icon text to make it white.

2

First I want to point out that this line of code:

root a:link, a:visited, a:hover, a:active { color: #ffffff}

Should actually be:

root a:link, root a:visited, root a:hover, root a:active { color: #ffffff}

Otherwise you are targeting all anchors:visited, anchors:hover, and anchors:active. Including those outside of root.

Second, I don’t see why root shouldn’t work, once the above is fixed, but if it still persists to give you issue I would attempt to make the css declaration more specific, attempt something like:

root > a:link, root > a:visited, root > a:hover, root > a:active { color: #ffffff}
3

Thanks! This works perfectly. And thanks for the explanation - that helps a lot.