Can't overwrite multiple classes based on body class

TToprak1 0
Viewed 34

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 ".dark" 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.

css
2 Answers

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;
}
kennarddh0

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;
 }
Jon P0
Related