I have a problem I need to solve with CSS selectors. I am trying to make automatic color overrides for Tailwind to have our site always comply to WCAG guidelines.
I have a tailwind plugin I’ve written which automatically fixes this problem – but I’ve realized the way I’m targeting the CSS selectors is off.
Assume there is a color, white. And another color – light grey. When light-grey is imposed on white, I want to automatically correct the color to black.
I am doing this currently with the following selectors
.bg-white .text-light-grey {
color: black;
}
However, this introduces problems! It works fine on this HTML structure:
<div class="bg-white">
<span class="text-light-grey">This is now black.</span>
</div>
But it will ruin this structure
<div class="bg-white">
<span class="text-light-grey">This is now black.</span>
<div class="bg-black">
<span class="text-light-grey">This is also now black, but it shouldn't be - It's inside a black container!.</span>
</div>
</div>
How can I modify the CSS selectors, so that when there is another background specified between them, the color is not corrupted.
Something like this
.bg-white :not(some fancy way to make sure there are no other bgs inbetween bg white and the text color) .text-light-grey {
color: black;
}
This has got to be possible right? Maybe something with class~=
or something?
Edit: Does anyone with knowledge of the :has()
selector know if this could be solved using it?
3
Answers
The idea that has come to my mind is to use two selectors. One targets the immediate child and the other checks all intermediary elements with classes for background color. Would this suffice in your situation?
EDIT: If you don’t have a lot of classes that require adjusted color, you may consider this way:
Consider leveraging the cascade. Use CSS variables that automatically cascade down on the
bg-*
classes. This has the advantage that it would work for an infinite amount of nesting:I had a go using
currentcolor
. Not sure how that would affect the rest of your project but sharing it in case it helps at all. It is similar to @Wongjn’s solution.https://play.tailwindcss.com/hQ4VW1RysN?file=css
And another one, even more similar to @Wongjn’s solution, but sharing in case it helps.
https://play.tailwindcss.com/CdT0KVvQga?file=css