Webkit系の一部で:checkedの変化が取れない
- 詳細
- カテゴリ: テンプレート
- 作成日:2015-09-10
Webkit系ブラウザの一部ではCSSで:checkedが付く要素から隣接セレクタで2つ以上離れた要素に対して指定した
プロパティが更新されない不具合があります。
■例
HTML
<input type="checkbox">
<span ></span>
<span ></span>
CSS
input:checked + span {
color: red;
}
input:checked + span + span {
color: blue;
}
上記HTMLの場合「input:checked + span」 で指定しているspanは正しくプロパティが適用され、
「input:checked + span + span」で指定しているspanにはプロパティが適用されません。
この現象により2つ以上離れた場所という指定はできないので、要素の位置を変更し、隣り合わせにするなどをして対応します。