web-dev-qa-db-ja.com

input [type = checkbox]で親divを変更：cssでチェック

チェックボックスがチェックされているときに親divを変更する方法を理解できます:(次の段落を変更するとうまくいきます。

Chromeで運なしにこのアプローチを試しました：

[〜＃〜] html [〜＃〜]

​<div>
    <input type="checkbox​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​" checked>
    <p>Test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

[〜＃〜] css [〜＃〜]

div {
    background: pink;
    width: 50px;
    height:50px;
}
div + input[type=checkbox]:checked {
  background: green;
}

input[type=checkbox]:checked + p {
    background: blue;
}

http://jsfiddle.net/lajlev/3xUac/

csscheckboxcss-selectorschecked
16
lajlev

CSSのみ（CSS4まで）で親を選択する方法がないため、JSを使用する必要があります。

それについて話しているこの投稿を参照してください here 。

11
Val

これを試して ：

html

<input type="checkbox" checked>
<div>
   <p>Test</p>
</div>

css

div {
    background: pink;
    width: 50px;
    height:50px;
}
input[type=checkbox]:checked + div {
  background: green;
}

input[type=checkbox]:checked + div p {
    background: blue;
}

デモ

7
Ali Tenni