こんばんわ。
実際にやってみました。
下記は動きます。
<p>
<input type="checkbox" id="checkbox" name="hoge" value="1" />
<label for="checkboxExample"> チェックボックス</label><br />
</p>
<style>
input[type="checkbox"] {
margin-right: 5px;
}
input[type="checkbox"]:checked {
margin-right: 10px;
}
</style>
下記は動きません。
<p>
<input type="checkbox" id="checkboxExample" name="hoge" value="1" />
<label for="checkboxExample"> チェックボックス</label><br />
<span class="test">テスト</span>
</p>
<style>
input[type="checkbox"] {
margin-right: 5px;
}
input[type="checkbox"]:checked .test{
margin-right: 10px;
}
</style>
僭越ですが
これはCSSでは無理なのでは？と思います。
jQueryなどを使用したほうがいいかと思います。
とりあえずこんな感じにしたらそれっぽい動きはするようです。
input:checked ~ .wpcf7-list-item-label {
display: none;
}
Contact Form 7 の場合チェックボックスの後に来る兄弟要素は wpcf7-list-item-label クラスの付いた span 要素(チェックボックスのラベル)のみですので、このセレクタで制御できるのはそこだけです。「.edfのクラス内を〜」というのは無理です。
また ~ のセレクタは CSS3 での導入のようなので、対応していないブラウザもまだ多く残っていると思います。現時点では jQuery で実現するのが無難でしょう。
(CSS3 についてはよく把握していないので間違ってたらご指摘ください。)
ご回答頂きましてありがとうございます。
おっしゃられるようにブラウザの対応の件もございますのでjQueryで対応するのが良さそうですね。
jQueryも不慣れなため試行錯誤ですがやってみたいと思います。ご回答頂きましてありがとうございます。
