どうも!LSSです!!
ちょっと思いついた事があって試してみたのですが…うまく行きませんでした^^;
変化しない例
色は変化しない
コード
<style><!--
#rng[value="1"]~#rng1{color:blue;}
#rng[value="2"]~#rng1{color:yellow;}
#rng[value="3"]~#rng1{color:red;}
--></style>
<p><input id="rng" style="width: 50%;" max="3" min="1" type="range" value="1" /><span id="rng1">色は変化しない</span></p>
期待した動作
<input id="rng" style="width: 50%;" max="3" min="1" type="range" value="1" />
シークバーは"1"から"3"の間で1づつ動かす事ができます。
value="1"
としているので、初期値は”1”です。
#rng[value="1"]
と指定すると、
「idがrngのタグに、valueに"1"が指定されていた場合」
に有効になる、というものです。
で、今回の例では、
#rng[value="1"]~#rng1{color:blue;}
と指定しているので、
「idがrngのタグに、valueに"1"が指定されていた場合の、兄弟要素でrng1というidを持つものの文字色をblueにする」
という指定になります。
兄弟要素として、
<span id="rng1">色は変化しない</span>
というのを置いているので、この「色は変化しない」という文字が青くなっていますね。
…と、ここまでは良かったのですが。
<input type="range"/>のシークバーのvalueの値は、JavaScriptから読みにいった場合、ユーザーによって動かされていたら、現在のツマミの位置に応じた値を取り出す事ができます。
これが「value」の値そのものが変化している、という事だったら、
#rng[value="1"]~#rng1{color:blue;}
#rng[value="2"]~#rng1{color:yellow;}
#rng[value="3"]~#rng1{color:red;}
という指定により、
「シークバーを"2"の位置に移動させれば文字が黄色に、"3"の位置なら赤に」なるかなぁ~と期待したのですが…なりませんでしたね^^;;;;;
つまり、「JavaScriptで取り出すvalueの値は操作変化による影響を受けるが、CSSの属性セレクタが確認するvalueの値はあくまで最初にHTML上に記載したものである」という事っぽい。
チェックボックスやラジオボタンで使える「:checked」は変化に応じてくれていましたが、こっちのほうはそうは動いてくれない、という事のようですね。
でも、ひょっとしてひょっとすると?
ひょっとしてひょっとすると…ブラウザによっては反応したりするのかな?と往生際の悪い事を思ってみたりw
もし↑のシークバーをいじって、「色は変化しない」の文字が黄色や赤になった方がおられましたら、教えてください^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^