Change every same css property in a css file

Question

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?

Chris · Accepted Answer · 2021-09-23 05:38:05Z

2

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.

answered Sep 23, 2021 at 5:38

Chris

513 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

attack-to-overflow Over a year ago

can I use this "var(--main-color);" in css file?

Chris Over a year ago

Sure can! Have a read here for some more official docs. w3schools.com/css/css3_variables.asp It works for all modern browsers after about 2015, so unless you need to do some backwards compatibility, you shouldn't have any problems.

Collectives™ on Stack Overflow

Change every same css property in a css file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related