Das ~ ist einfach gleiche ebene, nachfolgendes Element. Da kann man auch
2 Radios oder Checkboxen nehmen (siege Anhang):
1 | <style>
|
2 | #a:checked ~ #b:checked ~ #c {
|
3 | color: green;
|
4 | }
|
5 | </style>
|
6 | <input id="a" name="r1" type="radio" checked />
|
7 | <input name="r1" type="radio" /><br/>
|
8 | <input id="b" name="r2" type="radio" checked />
|
9 | <input name="r2" type="radio" />
|
10 | <div id="c">Hello World!</div>
|
Ein Problem ist, wenn die Checkbox verschachtelt ist, oder man abhängig
davon etwas vor denen anders darstellen will. Aber das kann man mit
:has() lösen: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
1 | <style>
|
2 | :root:has(#a:checked):has(#b:checked) #c {
|
3 | color: green;
|
4 | }
|
5 | </style>
|
6 | <div id="c">Hello World!</div>
|
7 | <label><input id="a" name="r1" type="radio" checked /> On</label>
|
8 | <label><input name="r1" type="radio" /> Off</label><br/>
|
9 | <label><input id="b" name="r2" type="radio" checked /> On</label>
|
10 | <label><input name="r2" type="radio" /> Off</label>
|
In Firefox ist das Feature aber leider noch deaktiviert...
Es gibt auch den Workaround, <label for> zu verwenden:
1 | <style>
|
2 | input:is([type="radio"],[type="checkbox"])[id^="l-"] { display: none; }
|
3 | label[for^="l-"]::before { content: '☐ '; }
|
4 | #l-1-1:checked ~ main label[for="l-1-1"]::before { content: '☑ '; }
|
5 | #l-1-2:checked ~ main label[for="l-1-2"]::before { content: '☑ '; }
|
6 | #l-2-1:checked ~ main label[for="l-2-1"]::before { content: '☑ '; }
|
7 | #l-2-2:checked ~ main label[for="l-2-2"]::before { content: '☑ '; }
|
8 |
|
9 | #l-1-1:checked ~ #l-2-1:checked ~ main #c {
|
10 | color: green;
|
11 | }
|
12 | </style>
|
13 | <input id="l-1-1" name="r1" type="radio" checked />
|
14 | <input id="l-1-2" name="r1" type="radio" />
|
15 | <input id="l-2-1" name="r2" type="radio" checked />
|
16 | <input id="l-2-2" name="r2" type="radio" />
|
17 | <main>
|
18 |
|
19 | <div id="c">Hello World!</div>
|
20 | <label for="l-1-1">On</label>
|
21 | <label for="l-1-2">Off</label><br/>
|
22 | <label for="l-2-1">On</label>
|
23 | <label for="l-2-2">Off</label>
|
24 |
|
25 | </main>
|
Da muss man halt die Reihenfolge richtig hin bekommen, und ist auch
sonst etwas aufwendiger.
Zum Schluss, noch ein kleines Tic Tac Toe in CSS:
https://tic-tac-toe-s.s.abrecht.li/
Edit: Ich war mir ziemlich sicher, dass HTML Anhänge mal eine Vorschau
hatten. Aber anscheinend doch nicht (mehr?)