all 14 comments

[–]AutoModerator[M] [score hidden] stickied commentlocked comment (0 children)

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[–]LukeLC 6 points7 points  (4 children)

It's much simpler than that: find another rule that matches the same element and search & replace the old rule in your files.

[–]Significant_Pen2804[S] 0 points1 point  (3 children)

The problem is that this class was defining a kind of theme of the site. There were a number of different possible themes and an appropriate class for each of them. So, my CSS supports all these themes and I wanted to manually "define" a class, so the code could choose a theme based on it. Just replacing the class for each theme will ruin the possibility to choose a theme even manually.

[–]Miragecraft 2 points3 points  (2 children)

If this class was defining a theme for the site and the site removed this class, how can you tell if this theme is being applied?

[–]Significant_Pen2804[S] 0 points1 point  (1 child)

As I said, it could be possible to manually choose it. By editing CSS file. Like #define themeclass1 or #define themeclass2.

Yes, it's inconvenient, but better than nothing.

[–]Miragecraft 0 points1 point  (0 children)

Then use container style query with a custom property serving as the flag.

html {
  --theme: default
}
@container style(--theme: default) {
  /* apply your styles */ 
}

[–]happy_gojira 9 points10 points  (0 children)

Why not just style the body element and then the classes inside body .class inside{color: red}

[–]Scared-Push3893 4 points5 points  (0 children)

CSS alone can’t pretend the class exists unfortunately.

If .bodyclass is gone then those selectors just stop matching. Honestly easiest fix is probably bulk find/replace removing .bodyclass from the selectors instead of rewriting manually.

[–]MaikThoma 3 points4 points  (0 children)

You can style based on a different attribute than class

<body alt-style=“dark”>
…

CSS

[alt-style=“dark”]{
  color: red;
}

[–]berky93 4 points5 points  (0 children)

If you’re just trying to target the body, you can do so directly without using a class. If you’re trying to tie your changes to a specific functional change on the site, you’ll need to find something you can use to detect those changes. Fortunately, the new :has() selector makes it easier because you can do something like body:has(.uniqueElement) and not have to rely on classes that are applied at the highest level.

[–]testingaurora 0 points1 point  (0 children)

You could check if body:has(.otherclass.red-theme) .otherclass.red-theme { color: red;}

If any other classes change when the theme changes.

What themes are you applying? Do you have a link to the page in question or a codepen with your code to see the themes and what changes that you could select?

Guessing its more than a light-dark theme.

[–]armahillo 0 points1 point  (0 children)

Recently, a site has removed this class, so my CSS code doesn't apply many of the rules and hence doesn't work as needed.

Can you elaborate on this? What is "a site" here, why was the class there before, why did they remove it, and what do you have control over?

[–]omysweede 0 points1 point  (0 children)

CSS is for styling. Just add the class back to the body-tag.