前書き
htmlでセレクトボックスってあるじゃないですか。あれで生年月日のフォーム作ろうと思ってですね?
emmetを使って以下のように書いたわけですよ。
option.birthday-year#birthday-year$@1900[value="$@1900"][label="$@1900"]*100
それで展開したのが、こちら
<option value="1900" class="birthday-year" id="birthday-year3799" label="5698"></option>
<option value="1901" class="birthday-year" id="birthday-year3800" label="5699"></option>
<option value="1902" class="birthday-year" id="birthday-year3801" label="5700"></option>
<option value="1903" class="birthday-year" id="birthday-year3802" label="5701"></option>
<option value="1904" class="birthday-year" id="birthday-year3803" label="5702"></option>
<option value="1905" class="birthday-year" id="birthday-year3804" label="5703"></option>
<option value="1906" class="birthday-year" id="birthday-year3805" label="5704"></option>
<option value="1907" class="birthday-year" id="birthday-year3806" label="5705"></option>
<option value="1908" class="birthday-year" id="birthday-year3807" label="5706"></option>
<option value="1909" class="birthday-year" id="birthday-year3808" label="5707"></option>
idとlabelが連番にならない...
本題
開発環境 atom1.8.0
まずは基本的なところから
option.birthday-year#birthday-year$[value="$"][label="$"]*10
<option value="1" class="birthday-year" id="birthday-year1" label="1"></option>
<option value="2" class="birthday-year" id="birthday-year2" label="2"></option>
<option value="3" class="birthday-year" id="birthday-year3" label="3"></option>
<option value="4" class="birthday-year" id="birthday-year4" label="4"></option>
<option value="5" class="birthday-year" id="birthday-year5" label="5"></option>
<option value="6" class="birthday-year" id="birthday-year6" label="6"></option>
<option value="7" class="birthday-year" id="birthday-year7" label="7"></option>
<option value="8" class="birthday-year" id="birthday-year8" label="8"></option>
<option value="9" class="birthday-year" id="birthday-year9" label="9"></option>
<option value="10" class="birthday-year" id="birthday-year10" label="10"></option>
これは問題なく連番に。
次:idを1900スタートにした。
option.birthday-year#birthday-year$@1900[value="$"][label="$"]*10
<option value="1" class="birthday-year" id="birthday-year1900" label="1900"></option>
<option value="2" class="birthday-year" id="birthday-year1901" label="1901"></option>
<option value="3" class="birthday-year" id="birthday-year1902" label="1902"></option>
<option value="4" class="birthday-year" id="birthday-year1903" label="1903"></option>
<option value="5" class="birthday-year" id="birthday-year1904" label="1904"></option>
<option value="6" class="birthday-year" id="birthday-year1905" label="1905"></option>
<option value="7" class="birthday-year" id="birthday-year1906" label="1906"></option>
<option value="8" class="birthday-year" id="birthday-year1907" label="1907"></option>
<option value="9" class="birthday-year" id="birthday-year1908" label="1908"></option>
<option value="10" class="birthday-year" id="birthday-year1909" label="1909"></option>
ん?labelが勝手に連番になった。
次:idとvalueを1900スタートにした。
option.birthday-year#birthday-year$@1900[value="$@1900"][label="$"]*10
<option value="1900" class="birthday-year" id="birthday-year3799" label="3799"></option>
<option value="1901" class="birthday-year" id="birthday-year3800" label="3800"></option>
<option value="1902" class="birthday-year" id="birthday-year3801" label="3801"></option>
<option value="1903" class="birthday-year" id="birthday-year3802" label="3802"></option>
<option value="1904" class="birthday-year" id="birthday-year3803" label="3803"></option>
<option value="1905" class="birthday-year" id="birthday-year3804" label="3804"></option>
<option value="1906" class="birthday-year" id="birthday-year3805" label="3805"></option>
<option value="1907" class="birthday-year" id="birthday-year3806" label="3806"></option>
<option value="1908" class="birthday-year" id="birthday-year3807" label="3807"></option>
<option value="1909" class="birthday-year" id="birthday-year3808" label="3808"></option>
idがおかしなことに
次:順番をいじってみた(idとclassを後ろに)
option[value="$@1900"][label="$"].birthday-year#birthday-year$*10
<option value="1900" label="1900" class="birthday-year" id="birthday-year1900"></option>
<option value="1901" label="1901" class="birthday-year" id="birthday-year1901"></option>
<option value="1902" label="1902" class="birthday-year" id="birthday-year1902"></option>
<option value="1903" label="1903" class="birthday-year" id="birthday-year1903"></option>
<option value="1904" label="1904" class="birthday-year" id="birthday-year1904"></option>
<option value="1905" label="1905" class="birthday-year" id="birthday-year1905"></option>
<option value="1906" label="1906" class="birthday-year" id="birthday-year1906"></option>
<option value="1907" label="1907" class="birthday-year" id="birthday-year1907"></option>
<option value="1908" label="1908" class="birthday-year" id="birthday-year1908"></option>
<option value="1909" label="1909" class="birthday-year" id="birthday-year1909"></option>
おお!なんかうまくいった!!
結論
要素の順番間違えるとうまくいかない?ぽい。