カッコ内のCSSセレクタの結果にアクセスするにはどうすればよいですか？

Question

ids1〜9の10個のHTML要素があるとします。要素1にはid="1"などがあります。これは私がやりたいことです。 "（IdNumber）"は構文ではなく、イラストだけに使用されます。

// for all elements 
#(IdNumber) {width: (IdNumber)%;} 

最終結果は、各要素の幅をidに等しくする必要があります。最初の要素の幅は1％です。不特定のCSSセレクタの結果を使用したいと思います。ここではid文字列、角括弧内は値です。 EG HTML：：

Answer 1

次のことで、これを達成することができます（LESSを使用）

<div id="MyDiv"> 
    <div id="MyDiv1"></div> 
    <div id="MyDiv2"></div> 
</div> 

LESS：

#MyDiv{ 
    width:500px; 
    height:200px; 
    border:red 1px solid; 
    #MyDiv1{ 
    width: 10%; 
    height:20px; 
    border:red 1px solid; 
    } 
} 
.setWidth{ 
    width: 20%; 
} 
#MyDiv2{ 
    .setWidth; 
    height:30px; 
    border:red 1px solid; 
} 

Answer 2

は、CSSには属性セレクタを使用することができますが、それぞれのスタイルを記述する必要がありますid：eXmpleの場合：

Html：

<div id="1"></div> 
<div id="2"></div> 
<div id="3"></div> 
<div id="4"></div> 

の

CSSは：

<style> 
    div { 
     background-color: blueviolet; 
     margin: 10px; 
     border: 1px solid gray; 
     height: 30px 
    } 
    [id="1"] { 
     width: 1%; 

    } 
    [id="2"] { 
     width: 2%; 
    } 
    [id="3"] { 
     width: 3%; 
    } 
    [id="4"] { 
     width: 4%; 
    } 
</style> 

私はそれが便利だ願っています。

Answer 3

それは次のようになります。

@for $w from 1 through 9 { 
    ##{$w} { 
    width: unquote('#{$w}%'); 
    } 
} 

しかし、純粋な数値IDがallowed in html5であるが、これはHTML4のためになるようではなかったし、それは一般的につながることができますので、私は強く、一部の文字を使用してIDを接頭辞に励まします純粋な数値のIDは数値と区別できないので問題です。