If background color is A then link color is B

HTML & CSS
1

The template of my website sets link color as Blue, and my problem is that if I set the background color of some containers to Green, then any Blue link inside these any such container becomes “almost invisible” and I then need to do something like this:

.box a {
	color: #fff;
}

.box a:hover {
	color: #000 !important;
}

.box a:focus {
	color: #fff !important;
}

.box a:active {
	color: #fff !important;
}

.box a:visited {
	color: #fff !important;
}

Repeatedly doing this for each box is probably inefficient.
Is there something more automatic to cover all containers with a Green background anywhere in the website?

2

Depends on how the background color is applied.

3

This can be shortened to

.box a, .box a:focus, .box a:active, .box a:visited {
	color: #fff;
}

.box a:hover {
	color: #000 !important;
}

Personally, I find the !important is concerning. That means you have some other sort of higher order specificity going on somewhere else. !important should be used as a last resort.

3 Likes
4

The only thing you could try is mix-blend-mode but it’s unlikely to work for every scenario. If the colours are something like this it might be worth a try.

5

How about with CSS variables?

Though it all depends on how the template is initially set up and how you are changing it.
Again the liberal use of !important sets off alarm bells that things are not good.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.