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?)
