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 });

Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more