Overtop Styling for Styled Components – HTML & CSS – SitePoint Forums

So I’m trying to think of a good way to do this, but I think 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 contents of the inner div are irrelevant to the topic.)
I’m trying to apply CSS on top of the site defaults (using Stylus/Stylish).

The difference between “kLhKBA” and “bcLTPL” is that bcLTPL applies a background color.

Class names are created programmatically and are subject to change.
The div to which the “different” class is applied changes daily. (highlighting current day header)

Is there a good way to select “weird stuff” without using a specific class name? I can’t think of one.

I’m not the site creator, so I have no control over the HTML structure or classes.

I don’t think it’s pure CSS.

I’ve found JS to be used quite easily, especially when sc-tVThF is consistently present.

• find all elements with that class
• Loop through those elements, then loop through the class list and put them into an array. Perhaps the class name is the key and the value is the count key/value.
• Sorting an array by value odds out the first entry.

If there’s a non-CSS programming language feature here, is it possible that the weird header there corresponds to the day of the week? Is it easy to get without using the class name? You can create a selector like :nth-of-type() and point to it.

No, I also don’t know how to do this if I don’t know the class name or if the weird class name jumps to another div .

I also don’t know how to do this with pure CSS. Many fixes have been made in JavaScript, but not in CSS.

One way to choose the “odd one out” without using a specific class name is to use CSS attribute selectors. You can target elements with specific attributes regardless of their value. For example, you can 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 elements of class “kLhKBA”.

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

This will target all divs with name attribute “calendarCanvasDayHeader” that don’t have class “kLhKBA”.

Another option is to use the nth-child selector. Allows you to select the nth element based on its position in the DOM. For example:

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

This selects the 4th div with the name attribute “calendarCanvasDayHeader”.

Note that this only selects the 4th element. Elements that change daily are not selected. The CSS should be updated daily according to the current position of the element.

The problems with this approach are:

The selector will fail if the class name changes.

Again, this is a flawed approach given the following: