Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【つまづき】CSSの属性セレクタは状態変化まで感知してくれないらしい【Windows版Chromeでテスト】

 どうも!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”です。

 

で、CSSに属性セレクタというものがあり、例えば

#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」は変化に応じてくれていましたが、こっちのほうはそうは動いてくれない、という事のようですね。

 

 

でも、ひょっとしてひょっとすると?

WindowsChromeでしか、試していません。

ひょっとしてひょっとすると…ブラウザによっては反応したりするのかな?と往生際の悪い事を思ってみたりw

 

もし↑のシークバーをいじって、「色は変化しない」の文字が黄色や赤になった方がおられましたら、教えてください^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^