実験室

Androidブラウザで間接セレクタ "E ~ F" がサポートされているかを実験する。

ページ表示時に指定されていれば適用されるが、JavaScriptで変更したときに適用されないことがある。

サンプル

最初から赤い文字
最初から赤い文字
ページ表示から３秒後に赤くなる
ページ表示から３秒後に赤くなる

タッチ後に赤くなる
タッチ後に赤くなるタッチすると黒くなる

input:checked + spanで実験

コード

<style>
.default div {
	color: black;
}
.default .show ~ div {
	color: red;
}

.timeout div {
	color: black;
}
.timeout .show ~ div {
	color: red;
}

div.checkbox span {
	color: black;
}
div.checkbox input:checked ~ span {
	color: red;
}

div.radio span {
	color: black;
}
div.radio input:checked ~ span {
	color: red;
}

div.click div {
	color: black;
}
div.click .show ~ div {
	color: red;
}

div.click div ~ div span {
	display: inline;
}
div.click div ~ div span ~ span{
	display: none;
}
div.click div.show ~ div span {
	display:none;
}
div.click div.show ~ div span ~ span{
	display: inline;
}
</style>