Zusatzfrage: Wie mit ~ und Pseudo-Selektor-Kombation nur einen Teil selektieren?

[Rolf B]

Hallo Gunnar,

Du müsstest eine Liste mit mindestens so vielen .start + :not(.end) + … + :not(.end)-Selektoren erstellen wie du Elemente zwischen .start und .end haben kannst.

Challenge accepted 😉

Ergebnis: 3 CSS Regeln genügen.

Regel 1: Aus per Default
Regel 2: .comment und .end hinter span.start:active sichtbar machen
Regel 3: Die .comment und .end, die hinter dem nächsten span.start folgen, wieder unsichtbar machen.

Ich hatte das so verstanden, dass die .end-Spans hinter .start ebenfalls per Default ausgeblendet sein sollen. Deshalb verwende ich nicht :not(.end), sondern span:is(.comment, .end).

span:is(.comment, .end) {
  display: none;
}

span.start:active ~ span:is(.comment, .end) {
  display: inline;
}

span.start:active ~ span:is(.comment, .end) ~ span.start ~ span:is(.comment, .end) {
  display: none;
}

Ich hab's auch mit nur 2 Regeln versucht, aber da konnte ich die Spezifische nicht alle angeln.

Man kann Regel 3 auch in Regel 2 hineinschachteln, dann sieht der Selektor nicht so entsetzlich lang aus, aber ich weiß nicht, ob der in Obsidious integrierter Browser das schon kennt.

Einfacher wär's ja, wenn man die .comment-Spans als Child-Element eines anderen Elements erzeugen könnte. Aber ich denke, das Obskurian-Markdown verweigert sich da?

Rolf