Android4.0.3(エミュレーター)の標準ブラウザで:checkedと間接&隣接セレクタが挙動あやしい

: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もスタイルの描画更新が起こって期待通りの動作に矯正できる。

追記2:ドコモショップで実機Galaxy Nexusを確認したら、同じ挙動でした。今回のは標準ブラウザの話で、Chromeのほうは大丈夫。