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.
CodePudding user response:
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;
}
CodePudding user response:
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;
}