In my CSS file, I have more classes and ids for the same color. I mean about "same color" is a visual thing.so, it can be "color" property also "background-color" and ".class:hover".
so same thing is a word like #33453
I want to change all #33453 in a CSS file with jquery. How can I do it?
my css file likes that:
<style>
.button-color, .button-border {
color:red;
border-color:#33453;
}
#background-color, button-background-color:hover {
background-color:#33453
}
</style>
I just found this:
$("body").children().each(function () {
$(this).html( $(this).html().replace(/@/g,"$") );
});
it is so smilar what I want but how can I change "body" selector with css file?
CSS Variables to the rescue!
You can create CSS variables, whcih can be referenced throughout your stylesheet.
Write a root: at the start of your stylesheet. And then '--' at the front of your variable name.
:root {
--main-color: #33453;
}
Then in your stylesheet you can reference the CSS variable with var().
.button-color, .button-border {
color:red;
border-color: var(--main-color);
}
#background-color, button-background-color:hover {
background-color: var(--main-color);
}
You can also change this variable in a cascading way. So if you have...say...a "dark" section you can also add
.dark {
--main-color: white;
}
And now anything with main-color inside of .dark will be different.