Title: Can't overwrite multiple classes based on body class
Tags: css
Question: I am playing with prism.css, there is a css declaration like this:
.token.function, .token.namespace, .token.pseudo-element, .token.class, .token.class-name, .token.pseudo-class, .token.id, .token.url-reference .token.variable, .token.attr-name {
color: red;
and if I want to overwrite this based on a body class (dark):
body.dark .token.function, .token.namespace, .token.pseudo-element, .token.class, .token.class-name, .token.pseudo-class, .token.id, .token.url-reference .token.variable, .token.attr-name {
color: blue;
it will always apply color: blue, even the body doesn't have the &quot;.dark&quot; class. However if I left only one css class like this:
.token.function {
color: red;
body.dark .token.function {
color: blue;
then this will work based on the body class.
Comment: You only have the `body.dark` on the first selector, so the rest go by order in the CSS file

Comment: Each entry is it's own selector, there is no shared parts in list like this, so you need to have the full selector path for each entry

Comment: Not sure what you mean. If I have one class or then classes after `body.dark`, what is the difference. If there is only one class then everything works, if there are more than one classes then it does not.

Here is the accepted answer: You can use is CSS pseudo-class
body.dark :is(.token.function, .token.namespace, .token.pseudo-element, .token.class, .token.class-name, .token.pseudo-class, .token.id, .token.url-reference .token.variable, .token.attr-name) {
color: blue;
Comment for this answer: Nice, could be optimized a little : `body.dark  .token:is( .function, .namespace,  ..etc ..)`

Here is another answer: You are only modifying body.dark .token.function , ie .token.function you need to add the body.dark selector to all the other selectors after the initial comma:
body.dark .token.function, body.dark .token.namespace, body.dark .token.pseudo-element, body.dark .token.class, body.dark .token.class-name,
body.dark .token.pseudo-class, body.dark .token.id, body.dark .token.url-reference,  body.dark .token.variable, body.dark .token.attr-name {
color: blue;
Whitout knowing much about your markup or CSS you could try.
body.dark .token {
color: blue;
Comment for this answer: Is there a better way without using SCSS?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:09/08/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css>', 'Title': "Can't overwrite multiple classes based on body class", 'ViewCount': 34, 'id': 73644755, 'user_AboutMe': None, 'user_AccountId': 14479732.0, 'user_DisplayName': 'TToprak1', 'user_Reputation': 335.0, 'user_Views': 41.0, 'user_id': 10459336.0}}