So i’m trying to think of a good way to do this, but I suspect my answer is “bite the bullet”.
Consider the following HTML.
<div id="calendarCanvasHeader" class="sc-ldQhTJ DnLdN">
<div name="calendarCanvasDayHeader" class="sc-tVThF kLhKBA">
...
</div>
<div name="calendarCanvasDayHeader" class="sc-tVThF kLhKBA">
...
</div>
<div name="calendarCanvasDayHeader" class="sc-tVThF kLhKBA">
...
</div>
<div name="calendarCanvasDayHeader" class="sc-tVThF bcLTPL">
...
</div>
<div name="calendarCanvasDayHeader" class="sc-tVThF kLhKBA">
...
</div>
<div name="calendarCanvasDayHeader" class="sc-tVThF kLhKBA">
...
</div>
<div name="calendarCanvasDayHeader" class="sc-tVThF kLhKBA">
...
</div>
</div>
(the content of the inner divs is irrelevant to the topic.)
I’m trying to apply CSS on top of the site’s defaults (with Stylus/Stylish);
The difference between “kLhKBA” and “bcLTPL” is that bcLTPL applies a background-color.
The class names are programmatically created, and could change.
The div that the “different” class is applied to will change every day. (It’s hilighting the current day’s header)
Is there a good way to select the “odd one out” without using the specific class name? I cant think of one.
I am not the creator of the site, and so do not have control over the HTML structure or classes.
Not through pure css, I don’t think.
I could see JS being used pretty easily, especially if sc-tVThF is consistently there.
- Find all the elements with that class
- loop through those elements, then loop through the classlist, putting them into an array. Probably key/value with the classname being the key, and a count as the value.
- Sort the array by value, the first entry will then be the odd man out.
2 Likes
If you have some programming language capability here other than just CSS, is there a chance the odd header there corresponds to the day of the week, which you could easily get yourself without using the class name? If so, you could create a selector like .calendarCanvasDayHeader:nth-of-type() to point to it.
1 Like
PaulOB
January 19, 2023, 4:09pm
#5
DaveMaxwell:
Not through pure css, I don’t think.
No, I can’t see a way to do this when you don’t know the class names and when the odd class name is jumping to different divs also.
2 Likes