CSS - Change css background of class text without sub element - html

Question

I'm working on a project based on a wordpress theme that is regularly updated so I can't change the HTML (without making maintenance hell anyway). I added a stylesheet that allows me to change the appearance of the site and all I have to do is add an "include" with each update.
I have an availability calendar that shows as follows:
As you can see, the "31" is barely visible.
The html output:
<td class="calendar-end" data-curent-date="1564531200">
31
</td>
I want to edit the text's css to add a reversed gradient (white on the red section, grey on the white section) so that the text is properly readable. See my css below
background: linear-gradient(135deg, #ffffff 0%,#ffffff 48%,#4d5567 48%,#4d5567 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
This gives the following result (when adding <p> tags to the element via chrome inspector and giving it the css rule)
My issue is, I don't know how to create a rule for the text as it's not a subelement.
Normally I would engulf the 31 with <p> tags so I could create a rule for .calendar-end p but thats not possible because of the HTML restrictions...
Is there a way that I am not aware of to affect the text inside the td via a specific css rule?
If I try to apply my code to the .calendar-end class it causes a conflict with the background gradient and I end up with completely invisible text (same gradient as background)
I am not sure what I am asking is even possible but css isn't my strong suit and I'm hoping someone here is more knowledgeable than I am on the subject :D
Thanks for any help all!

Answer 1

With chrome you can consider multiple background like below (doesn't work on firefox, raised a bug)
.calendar-end {
color: transparent;
background:
linear-gradient(135deg, #ffffff 48%, #4d5567 48%),
linear-gradient(135deg, red 48%, #fff 48%);
-webkit-background-clip:
text,
padding-box;
background-clip:
text,
padding-box;
width:100px;
height:100px;
font-size:100px;
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>
For the other browser consider a pseudo element. Simply make sure to not specify any z-index to main element to have the pseudo element behind (related: Why can't an element with a z-index value cover its child?)
.calendar-end {
background:
linear-gradient(135deg, #ffffff 48%, #4d5567 48%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
width:100px;
height:100px;
font-size:100px;
position:relative;
}
.calendar-end:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: linear-gradient(135deg, red 48%, #fff 48%);
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>
In case the gradient will be the same for text and background you can optimize the code like below:
.calendar-end {
background-image:
linear-gradient(135deg, #ffffff 49%, #4d5567 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
width:100px;
height:100px;
font-size:100px;
position:relative;
}
.calendar-end:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-image: inherit;
transform:rotate(180deg);
}
<div class="calendar-end" data-curent-date="1564531200">
31
</div>