How to use variable CSS selector

Question

Does anyone know how I can use a variable CSS selector? For example, I want my CSS to grab a table id attribute that's variable... something like:

<table id="table_1">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

<table id="table_2">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

<table id="table_3">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

Now I want to grab the tables by their id:

table#[INSERT VARIABLE TABLE ID HERE]{ 
  margin: 0 auto;
  border-collapse: collapse;
  font-family: Agenda-Light, sans-serif;
  font-weight: 100; 
  background: #333; color: #fff;
  text-rendering: optimizeLegibility;
  border-radius: 5px; 
}

Thanks in advance!

check this out http://stackoverflow.com/questions/12155833/css-selector-id-contains-part-of-text — Sankara, Apr 01 '17 at 00:10
For this specific example: `table[id^=table_]` will select all `` elements with an `id` attribute that starts with string `"table_"`. — David Thomas, Apr 01 '17 at 00:14
No, this isn't possible, CSS doesn't have variables. You would need to make this a class and then vary which table has the class using JavaScript. — Rik Lewis, Apr 01 '17 at 00:16

score 2 · Accepted Answer · answered Apr 01 '17 at 00:16

If all tables have same css you could use a class instead of id.

It is not possible to iterate or do other kind of logic in css. To use variables you could use css pre processors like sass or less, but you would have to define every variable "by hand".

How to use variable CSS selector

1 Answers1