Want to use css selectors with variables for all TD ids within a table

Question

I want to set CSS properties for all td ids for rows in a table. Instead of doing this:

.idName1, idName2, idName3, idName4, idName5 {background-color: ##4CAF50;}

I'd like to do this:

.idName#{$x} {background-color: ##4CAF50;} 
...where $X is a php variable indicating row number.

Is this valid to use CSS selectors with a variable like this?

Thank you.

.

Answer 1

Consider CSS Attribute-based Selectors

CSS supports a variety of attribute-based selectors, including a "starts with" selector, which you could use to match any classes that began with "idName" as seen below :

/* This will match any classes that start with "idName" */
[class^="idName"] {
    background-color: #4CAF50;
}

Likewise, if you wanted to explicitly target the id attribute, you could do that as well :

[id^='idName'] {
    background-color: #4CAF50;
}

Consider reviewing through the various supported selectors detailed in the link above to determine which would best suit your needs.

Example

[class^="idName"] {
  background: yellow;
}

<div class="idName1">1</div>
<div class="idName2">2</div>
<div class="idName3">3</div>
<div class="x">X</div>
<div class="idName4">4</div>
<div class="x">X</div>
<div class="idName5">5</div>
<div class="x">X</div>
<div class="idName6">6</div>
<div class="x">X</div>

Answer 2

well that is not valid in css but you can do one thing , you can use css starts with attribute selector

[id^='idName'] {
  color: red
}

<div id="idName1">one</div>
<div id="idName2">two</div>
<div id="did">did</div>
<div id="idName3">three</div>

read more about it and other similar selectors here https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors