Android4.0.3（エミュレーター）の標準ブラウザで:checkedと間接＆隣接セレクタが挙動あやしい
Posted: Updated:
:checkedの状態変化に、続く間接セレクタが追いついていない
前置き。あいにく手元に、4.0.3のAndroidエミュレーター（Mac）しか無いため、実機での挙動がどうなのかは未検証です。話半分ぐらいでお願いできると(；´Д`人
で、現象としてはチェックボックスやラジオボタンでcheckedを付けたり外したりしたときに、:checkedと間接＆隣接セレクタによるスタイルの適用がおかしい感じ。
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
:checked + #first {
color: blue;
}
:checked ~ #first {
background-color: yellow;
}
:checked + #first + #second {
color: red;
}
:checked ~ #second {
background-color: silver;
}
#first, #second {
padding: 20px;
}
</style>
</head>
<body>
<input type="checkbox" name="check" value="on">チェックチェック！
<div id="first">blue/yellow</div>
<div id="second">red/silver</div>
</body>
</html>
実行するとこんな感じ
:checked + #firstと:checked ~ #firstはOKでした。
しかし、:checked + #first + #secondと:checked ~ #secondはNG。要素間の距離があると、:checkedの状態変化に追いつけていないようです。
- :checkedな要素と隣合っていれば、間接セレクタ・隣接セレクタともに可
- :checkedを基点に、隣接セレクタで2つ以上の要素をつないで捉えるのは不可
- :checkedを基点に、間接セレクタで2つ以上離れた要素を捉えるのも不可
- ページロード時に、最初から:checkedな状態であればすべて正常に動く（下記）
最初からcheckedなら大丈夫
HTMLで最初からchecked属性を付けておくなどして、ページロードされた時点ですでにcheckedであれば、すべてのセレクタが期待通りに動作しているようです。
あと、querySelectorから同じセレクタで要素を捉えようとする分にも、問題なく動作します。単純に、スタイルの描画更新が2つ以上離れた要素に伝播してくれてない感じでしょうか...。実機だとしれっと動きそうで深入りしたくない。
だれか実機(で試して)ください！
追記：とりあえず回避はできそう。:checkedと隣接するようにdiv要素で#first, #secondをラップして、:checked時に隣接させたラップ用div要素のスタイルも変化するようにしてやれば、中の#firstと#secondもスタイルの描画更新が起こって期待通りの動作に矯正できる。
追記２：ドコモショップで実機Galaxy Nexusを確認したら、同じ挙動でした。今回のは標準ブラウザの話で、Chromeのほうは大丈夫。
