Styling overtop of styled-components

HTML & CSS
#1

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.

#2

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
#3

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
#5

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
#7

I also do not see a way to do this with pure CSS. Many fixes with Javascript, but not CSS.

1 Like
#8

One way to select the “odd one out” without using the specific class name would be to use the CSS attribute selector. You can target elements that have a specific attribute, regardless of its value. For example, you could use the following CSS to target all divs with the name attribute “calendarCanvasDayHeader”:

[name="calendarCanvasDayHeader"] {
  /* your styles here */
}

Then you can use the :not selector to exclude the elements with the class “kLhKBA”

[name="calendarCanvasDayHeader"]:not(.kLhKBA) {
  /* your styles here */
}

This will target all divs with the name attribute “calendarCanvasDayHeader” that do not have the class “kLhKBA”, which should be the “odd one out” you’re trying to target.

Another option would be to use the nth-child selector, you can select the nth element based on its position in the DOM, for example:

[name="calendarCanvasDayHeader"]:nth-child(4) {
  /* your styles here */
}

This will select the 4th div with the name attribute “calendarCanvasDayHeader”

Keep in mind that this will only select the 4th element, it will not select the element that will change every day, you’ll need to update your css to match the current position of the element every day.

#10

The problem with this approach is:-

If the class names change, the selector will fail.

Again, this is a flawed approach when you consider:-

1 Like