css3 - RegEx for css class name -

i want have class cx x number between 0 , 100. add c0 c100 css. well, i'd avoid that.

i know there ways match element attributes h2[rel="external"]. possible match class names? possible use matched value within rule?

example

.c[x] { height: x%; } 

edit - css attr

after bit of research, found there css function called attr looking for, however, support limited css content property , not others, however, interesting keep eye on it, reckon solution of future

from moz mdn:

the attr() css function used retrieve value of attribute of selected element , use in style sheet. can used on pseudo-elements and, in case, value of attribute on pseudo-element's originated element returned.

your code this:

.c { height: attr(data-height %, 0); } 

html

<div class="c" data-height="1"></div> ... 

this height element's data attribute , sets % percentage unit , falls 0 if data-height not found.

---

current supported methods:

from w3 docs:

6.3.2. substring matching attribute selectors

three additional attribute selectors provided matching substrings in value of attribute:

[att^=val]

represents element att attribute value begins prefix "val". if "val" empty string selector not represent anything.

[att$=val]

represents element att attribute value ends suffix "val". if "val" empty string selector not represent anything.

[att*=val]

represents element att attribute value contains @ least 1 instance of substring "val". if "val" empty string selector not represent anything. attribute values must css identifiers or strings. [css21] case-sensitivity of attribute names in selectors depends on document language.

as discussed in comments, there no pure css solution @ moment, try 1 of following approaches:

sass

@for $i 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 harry

---

server side

you make server side script output inline css each item

php example:

<?php  ($i = 1; $i <= 100; $i++) {     echo "<span height='".$i."%'>".$i."</span>"; }  ?> 

output

<span height="1%">1</span> ... 

---

jquery

var = 0; $('.c').each(function() {   i++;   $(this).attr('height', + '%');   //console.log(i); //debug });