How do I add in CSS style a class name that has a variable value?

Question

I have a lot of tables that have different names like: my-table-1590 , my-table-1400, my-table-1121 , and so on.

I want to add in CSS, one custom style that should change all these tables together.

For example, i want instead of all these individual style code:

#my-table-1590 .my-table--desktop .my-table-product-0 {
background-color: red;
}

#my-table-1400 .my-table--desktop .my-table-product-0 {
background-color: red;
}

#my-table-1121 .my-table--desktop .my-table-product-0 {
background-color: red;
}

...

I want to add only one code that will change all tables (including future tables that i will make).

Is it possible to do this?

Thanks in advance for all the help!!

score 0 · Answer 1 · answered May 04 '20 at 10:48

It looks like all of your tables have the same structure inside them, with the actual element you want to make red always having the class .my-table-product-0.

So can't you just use the following code?

.my-table-product-0 {
  background-color: red;
}

If this isn't possible for some reason, add another class, such as .red-table, to all of the tables so that you can target them like this:

.red-table .my-table--desktop .my-table-product-0 {
  background-color: red;
}

This is exactly what classes (that apply to several elements) and not ids (which apply to single elements) are for.

Alternatively, for cases where the structure is not always the same, you can use CSS variables. Declare a variable somewhere like this:

html {
  --table-color: red;
}

And then use it on all of your tables:

#my-table-1590 .my-table--desktop .my-table-product-0 {
  background-color: var(--table-color);
}

#my-table-1400 .my-table--desktop .my-table-product-0 {
  background-color: var(--table-color);
}

#my-table-1121 .my-table--desktop .my-table-product-0 {
  background-color: var(--table-color);
}

...

Indeed for some reason it's not working to add only ".my-table-product-0". It's working only when i specifically add the table name "#my-table-XXXX". — tray kaleel, May 04 '20 at 11:06
@traykaleel That suggests that some other style is being applied to `my-table-product-0`, and a higher specificity (such as an `id`) is need to override this style. The code `.my-table-product-0 {background-color: red !important;}` would probably work in this case, although many people would discourage overusing the CSS `!important` statement. — Run_Script, May 04 '20 at 11:18
Yes that could be the case with my code also. Although I tried a few times but it didn't help. Now after all the comments here, i guess i made a mistake somewhere (i have a very "bushy" structure :) ). I will have to try more!! Thank U!! — tray kaleel, May 04 '20 at 11:39

score 0 · Answer 2 · answered May 04 '20 at 10:49

0

You could try by using CSS variables:

Declaration:

--main-color: black;

Usage:

color: var(--main-color);

How do I add in CSS style a class name that has a variable value?

3 Answers3