RegEx for css class name - css

Question

I want to have a class cX where x is a number between 0 and 100. I could add c0 to c100 to my css. But well, I'd like to avoid that.
I know there are ways to match element attributes like h2[rel="external"]. But is it also possible to match class names? Would it also possible to use the matched value within the rule?
Example
.c[x] { height: x%; }

Answer 1

EDIT - CSS attr
After a bit of research, I found that there is a CSS function called attr which is exactly what you are looking for, however, its support is currently limited to the CSS content property and not others, however, it is interesting to keep an eye on it, I reckon it will be the solution of the future
From Moz MDN:
The attr() CSS function is used to retrieve the value of an attribute
of the selected element and use it in the style sheet. It can be used
on pseudo-elements too and, in this case, the value of the attribute
on the pseudo-element's originated element is returned.
Your code would probably look like this:
.c { height: attr(data-height %, 0); }
HTML
<div class="c" data-height="1"></div>
...
This will get the height from the element's data attribute and sets it with the % percentage unit and falls back to 0 if data-height is not found.
Current supported methods:
From the W3 Docs:
6.3.2. Substring matching attribute selectors
Three additional attribute selectors are provided for matching
substrings in the value of an attribute:
[att^=val]
Represents an element with the att attribute whose value
begins with the prefix "val". If "val" is the empty string then the
selector does not represent anything.
[att$=val]
Represents an element
with the att attribute whose value ends with the suffix "val". If
"val" is the empty string then the selector does not represent
anything.
[att*=val]
Represents an element with the att attribute
whose value contains at least one instance of the substring "val". If
"val" is the empty string then the selector does not represent
anything. Attribute values must be CSS identifiers or strings. [CSS21]
The case-sensitivity of attribute names in selectors depends on the
document language.
As discussed in the comments, there is no pure CSS solution at the moment, you could try one of the following approaches:
SASS
#for $i from 1 through 100 {
$height: percentage($i/100);
.c#{$i} {height: $height;}
}
Output:
.c1 {height: 1%;}
.c2 {height: 2%;}
.c3 {height: 3%;}
...
LESS
.c-gen(#index) when (#index > 0){
.c#{index}{
height: #index * 1%;
}
.c-gen(#index - 1);
}
.c-gen(100);
LESS code by Harry
Server Side
You could make your server side script output inline CSS for each item
PHP Example:
<?php
for ($i = 1; $i <= 100; $i++) {
echo "<span height='".$i."%'>".$i."</span>";
}
?>
Output
<span height="1%">1</span>
...
jQuery
var i = 0;
$('.c').each(function() {
i++;
$(this).attr('height', i + '%');
//console.log(i); //debug
});