css - チェックされたセレクターによって前の要素を隠す

Question

css3機能を使用して前の要素を非表示にしたいと思います。

基本的に、

チェックボックスを使用して、javascriptを使用せずに前の兄弟要素を非表示にします。

エントリポイントのサンプルを用意しました。

ありがとう

編集：

サンプルを変更しました。
私のユースケース：自分のサイトに折りたたみ可能なセクションが必要です。シンプルなチェックボックスで区切られた2つの領域をチェックすると、前の兄弟が美しく隠されます。

純粋なcssを使用すると、このタスクでのjavascriptの使用を減らすことができると思います。

score 0 · Accepted Answer

一致した要素の前のタグを選択するためのcssセレクターはありません。次の要素のためにそれを行っているcssのみを使用して取得できる最も近いもの：

<input class="hider" type="checkbox" /> child
<div class="parent">
    Parent
</div>

.hider:checked + * {
    display:none;
}

score 0 · Accepted Answer

次に、要素を配置できる可能性があるため、実際のページでは、.parentdivの後にチェックボックスが表示されます。

2 に答える 2