CSSで自身よりも上に位置する要素のスタイルを変更したい

CSSで自身よりも上に位置する要素のスタイルを変更したいです。
下記のようなコードで考えています。

HTML
1<html>
2  <body>
3    <div class="box box1"></div>
4    <input type="checkbox" class="checkbox">check box
5    <div class="box box2"></div>
6  </body>
7</html>

CSS
1.box {
2    width: 100px;
3    height: 100px;
4    background-color: red;
5}
6
7.checkbox:cheked ~ .box2 {
8    background-color: black;
9}

このようなコードで、チェックボックスにチェックが入った際に、チェックボックスよりも上の要素であるbox1のスタイルを変更したいと考えています。こうした動作をCSSで実現することは可能でしょうか？とりあえず今のところはJavaScriptで対応していますが、CSS内で完結できればいいなと思っています。

間接セレクタを使用すると、チェックボックスの下にある要素、box2のスタイルは変更できますが、今回は上に適応させたいと考えています。間接セレクタの逆バージョンがあれば楽なのですが...

pointer-eventも考えてみましたが、hoverやactiveではなくチェックしている間はずっと変更後のスタイルと適応させておきたいです。

ざっと調べた結果、出来そうにないとは思っていますが、もしかしたら調べ方が悪かったり、見落としていたりするかもしれないと思い質問させていただきました。

何かご存じの方いましたら、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

将来的に:has()が使えるようになったら簡単にできるでしょうね。

【:has() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:has

今のCSSだけで行うなら、HTMLの順番を変えて、チェックボックスをCSSで描画するように変えるとかだと思います。

HTML
1<html>
2  <body>
3    <input type="checkbox" class="checkbox"><!-- これを画面外にでも置く -->
4    <div class="box box1"></div>
5    <span class="span-checkbox"><!-- チェックの状況に合わせた表示をCSSで表現 --></span>check box
6    <div class="box box2"></div>
7  </body>
8</html>